Merubah Image atau Tampilan Cursor Pada Blog

Merubah Image atau Tampilan Kursor Pada Blog : Pada postingan yang lalu, di sini, telah dijelaskan cara mengkustomasi bentuk kursor mouse yang diaplikasikan untuk teks tertentu dalam suatu postingan dengan memanfaatkan bentuk kursor yng ada (bawaan/default Windows). Nah, pada kesempatan ini, Tips dan Trik Blog akan memberikan script untuk merubah kursor mouse di mana bentuk/image kursornya dapat dikustomasi (diganti) sesuai kehendak atau selera masing-masing.

Langkah-langkahnya dapat dilakukan dengan dua cara yaitu menambah script pada gadget/widget dan merubah kode css.

CARA PERTAMA
Menambahkan Script Pada Gadget

Untuk melakukannya tidak memerlukan langkah-langkah yang rumit. Yang perlu kita lakukan hanyalah melakukan copy paste atas script yang akan saya berikut ini pada gadget/widget blog kita. Dengan script tersebut, bentuk/image kursor mouse tidak hanya berlaku pada teks tertentu saja namun pada keseluruhan bodi blog.

Formatnya seperti di bawah ini.

Keterangan

Ganti URL_Image_Kursor dengan alamat/direktori image kita.

Misalkan alamat image kita adalah http://www.geocities.com/yono_pati/baby1.gif maka script-nya menjadi seperti di bawah ini.

Selanjutnya,…..

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak (layout) >> Tambah Gadget >> Tambahkan HTML/Javascript
Kedua, copy paste script di atas
Ketiga, Simpan Perubahan
Keempat, selesai


CARA KEDUA
Melakukan Perubahan Pada Kode CSS

Bagi yang blognya sudah terlalu banyak memuat widget/gadget untuk script-script yang lain, jika menginginkan, kita dapat melakukannya dengan merubah pada kode css-nya. Jika demikian, langkah-langkahnya adalah sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML
Kedua, centangi “Expand Widget Template”
Ketiga, cari kode body {
Bagi pengguna Firefox, untuk mempermudah pencarian, gunakan Ctrl+F

Keempat, tempatkan format kode berikut ini dalam tag body { tersebut.

cursor : url("URL_Image_Kursor"), auto;

Sehingga selengkapnya menjadi seperti di bawah ini.

body {
cursor : url("URL_Image_Kursor"), auto;
………………………
………………………
}

Kelima, simpan template
Keenam, selesai.

Oh iya, jika tidak mau repot, kita dapat mengambil image untuk kursor di http://totallyfreecursors.com/. Di sana, kita dapat memilih dari berbagai kategori, seperti “animal”, “kartun”, “baby”, ‘animated”, “comics”, dan masih banyak lagi yang lainnya.

Untuk mempermudah para downloader, di sana, kita dapat langsung mendapatkan kode html-nya, jadi tidak perlu melakukan penyimpanan pada hosting sendiri namun jika menginginkan, kita juga dapat melakukannya dan menempatkan pada image hosting sendiri.

Untuk melihat contoh hasilnya,coba arahkan mouse ke arah teks di bawah ini.

Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog Contoh ilustrasi merubah tampilan image atau kursor pada blog.

Baca juga yang ini.
Kustomasi Kursor Pada Teks Tertentu Dalam Postingan
Mengkustomasi Kursor Pada Bodi Postingan