Monday 14 November 2011

Cara Mengganti Gambar Kursor di Blog

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/AVvXsEgfDrk9fnKy5ZhOXJW5W73xdjxOdGPdzq1WGxHJx2eg6U6BSt7nHSNMBRlq0_75J8SyXGr8HY8p-cSnzCEGflx24HRejXXm-xttQgsWNHxk-t-vWjYJ4hDz21AL2T2W6vskgBG0Qx1gZeSe/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/AVvXsEgfDrk9fnKy5ZhOXJW5W73xdjxOdGPdzq1WGxHJx2eg6U6BSt7nHSNMBRlq0_75J8SyXGr8HY8p-cSnzCEGflx24HRejXXm-xttQgsWNHxk-t-vWjYJ4hDz21AL2T2W6vskgBG0Qx1gZeSe/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/AVvXsEgfDrk9fnKy5ZhOXJW5W73xdjxOdGPdzq1WGxHJx2eg6U6BSt7nHSNMBRlq0_75J8SyXGr8HY8p-cSnzCEGflx24HRejXXm-xttQgsWNHxk-t-vWjYJ4hDz21AL2T2W6vskgBG0Qx1gZeSe/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.

33 comments:

  1. wah kayaknya keren nie dicoba...makasih gan..

    ReplyDelete
  2. wah mantap nich mas,,, ijin nyoba ya mas,,, thanks buat tutornya,,,

    ReplyDelete
  3. sekarang saya move ke wp mas.... kira2 bisa nggak yh kaau di pasang di wp

    ReplyDelete
  4. keren nih kursonya jadi berubah,,, banyak tutorial blog di blog sobat ini yach...

    ReplyDelete
  5. aku coba copy kenapa nggak keluar ya pas blogny aku liat? :'(

    ReplyDelete
  6. patut dicoba neh gan..nais info
    mampir balik ya gan, ada info terbaru nih klik...Ternyata Khitan Pada Wanita Itu Tidak Ada Manfaatnya

    ReplyDelete
  7. thanks ya buat infonya. Sangat membantu banget.

    ReplyDelete
  8. makasih ane newbie sala kenal warahmatulahi wabarokatuh..

    ReplyDelete
  9. bagian edit HTML adanya dimna sich ?? koq qu gk dpet2 ??

    ReplyDelete
  10. gan punya q sama dengan punya blog agan silahkan mapir jika mau lihat

    ReplyDelete
  11. Nice Info Gan ! Lanjutkan .
    Visit My Blog
    http://me-permana.blogspot.com/ ;)

    ReplyDelete
  12. gann saya copass yaa... tpi saya kasih link sumber

    ReplyDelete
  13. @blog zeze silahkan mas, terimakasih sebelumnya ya :D

    ReplyDelete
  14. wah .............
    makasih gan atas ilmunya...:)

    ReplyDelete
  15. aku mau coba dulu, semoga bisa, thanks info-nya ^^

    ReplyDelete
  16. keren :)
    kayaknya mesti dicoba nih
    eh tapi gambar cursornya itu mesti di download dulu gak

    ReplyDelete
  17. @isny gak mesti sih gan, agan bisa copy URL gambar cursor ke kode yang udah dibagikan :)

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    ReplyDelete