Pages

Cara Mengganti Gambar Kursor di Blog

14 November 2011

Cara Mengganti Gambar Kursor di Blog - Pada kesempatan kali ini 4JIE akan coba bagikan cara-cara mengganti gambar kursor di blog. Defaultnya sebuah kursor pada satu blog hanyalah berbentuk panah. Namun, buat kamu yang bosan dengan tampilan kursor bawaannya, dapat menggunakan gambar lain sebagai kursor penunjuk untuk blog mu. Selain dapat mempercantik tampilan blog, pengunjung akan lebih mudah untuk meng-klik apapun apa yang ada didalam blog mu. Seperti meng-klik iklan, widget, teks, dll. Ide postingan kali ini muncul saat ketika saya ingin merubah kursor blog pribadi saya. LIVE DEMO  Buat yang udah gak sabar ingin mencoba, silahkan ikuti tutorialnya dibawah ini nih :


Cara Mengganti Gambar Kursor di Blog
1. Log ini ke akun blogger sobat;
2. Pilih menu Rancangan » Edit HTML;
3. Beri tanda centang pada tulisan Expand Template Widget;
Carilah kode yang kurang lebih seperti berikut ini :

body {
margin:0;
background:#cccccc;
color:#000000;
text-align: center;
}


a:link {
color:$linkcolor;
text-decoration:none;
}


a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}


a:hover {
color:#000;
text-decoration:underline;
}

5. Kemudian tambahkan kode cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOR2XyrT0uA_xfERGH52iDsSwnngOESuGRiafZJ39si9hTkB95lpRt_nhmAhXccmcxdVRJYO7UVa3KDLBusEYFa4LrMoTt8xcefggql8hqUj94XoRJemD__jLReSq4tKFqbLlso3YHngz/s1600/cursorblue.png), progress; sehingga menjadi seperti ini;

body {
margin:0;
background:#cccccc;
color:#000000;
text-align: center;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOR2XyrT0uA_xfERGH52iDsSwnngOESuGRiafZJ39si9hTkB95lpRt_nhmAhXccmcxdVRJYO7UVa3KDLBusEYFa4LrMoTt8xcefggql8hqUj94XoRJemD__jLReSq4tKFqbLlso3YHngz/s1600/cursorblue.png), progress;
}


a:link {
color:$linkcolor;
text-decoration:none;
}


a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}


a:hover {
color:#000;
text-decoration:underline;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOR2XyrT0uA_xfERGH52iDsSwnngOESuGRiafZJ39si9hTkB95lpRt_nhmAhXccmcxdVRJYO7UVa3KDLBusEYFa4LrMoTt8xcefggql8hqUj94XoRJemD__jLReSq4tKFqbLlso3YHngz/s1600/cursorblue.png), progress;
}



Kode cursor yang berada pada tag body { adalah untuk mengganti cursor default pada blog kita, sedangkan kode cursor yang berada pada tag a:hover { adalah untuk cursor pada link. kamu bisa merubah url ( kode warna biru ) gambar untuk cursor pada blog sobat sesuai dengan keinginan sobat, atau sobat bisa cari url cursor di http://www.totallyfreecursors.com/, http://www.123cursors.com/ dan http://www.cursors-4u.com/;

5. Kemudian simpan template sobat dan lihat hasilnya.

No comments:

Post a Comment

 

Populer