Cara Mengganti Template di blogspot

Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.
Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan. Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.
Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti template dengan template yang didapat dari penyedia template. Berikut ulasannya :

Mengganti Template dengan Template yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.
4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6 template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik APPLY TO BLOG.
   
5. Selesai.

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogtemplate4u.com.
2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip.
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik Rancangan.
6. Klik menu Edit HTML.
7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.
   
9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.
10. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya
Selamat mencoba!

cara memasukan jam pada blog

Cara pasang jam di blogger

Banyak sekali sahabat blogger baru yang menanyakan bagaimana cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kau hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog. Jujur om sangat tidak menyarankan untuk memasang jam pada blog kalian, selain bikin lambat page load juga kurang terlalu berguna, coba baca artikel om sebelumnya 17 Tips agar halaman blog tampil Profesional. Walaupun sudah banyak para blogger yang mengetaui cara pasang jam ini tapi tidak begitu bagi blogger pemula yang baru memulai membuat blog tentu perlu tahapan dan bimbingan jadi gak ada salahnya untuk memasang aksesoris ini jika dirasa berguna :). Layanan gratis aksesori jam sangat banyak, namun kali ini om hanya menjelaskan cara pasang jam menggunakan layanan gratis dan paling banyak digunakan http://www.clocklink.com/

Langkah-langkah pasang jam di blogger sebagai berikut:

1. Klik alamat http://www.clocklink.com/
2. Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php 
3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
9. Selesai :) dan lihat hasilnya.

Contoh jam :


Selamat mencoba dan happy Blogging :)

Cara membuat tulisan mengitari cursor

Cara Membuat Tulisan Mengikuti Cursor

Gb. Demo Tulisan Berputar

Udah pernah lihat tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti Cursor di blog blogger?

Tadi saya baru saja berkunjung ke salah satu blog teman yang menulis pesan di buku tamu, di sana saya melihat sebuah tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti kemanapun arah cursor tersebut.

Setelah melihat itu saya jadi ingin untuk menuliskan caranya, siapa tahu ada yang ingin  menghias blog nya dengan tulisan berputar mengelilingi cursor blognya.

Panduan Cara Membuat Tulisan Berpuatar Mengelilingi Cursor

1. Login ke dashboard blogger
2. Klik Design/Rancangan

3. Setelah itu klik Edit HTML

Kemudian cari kode

</body>

Dan letakkan script berikut sebelum kode </body> tadi

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;

/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "(Blogger Tutorial)";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Pada bagian

// Your message here (QUOTED STRING)
var msg = "(Blogger Tutorial)";

silakah ganti tulisan (Blogger Tutorial) dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.