Tag Archive: kursor


Mengkustomasi Kursor Pada Bodi Postingan

Membuat Tampilan Kursor Pada Bodi Postingan : Pada postingan terdahulu, di sini, telah dijelaskan cara membuat tampilan kursor pada seluruh bodi blog dan sekarang kita akan membuat tampilan kursor hanya pada bodi postingan. Jadi, kursor mouse akan berubah sesuai yang kita kehendaki hanya pada bodi postingan saja sedangkan di area lainnya bentuk kursornya standar. Jika tertarik, silakan ikuti tipsnya bersama Tips Trik Ngeblog berikut ini.

Seperti tips sebelumnya (membuat tampilan kursor pada bodi blog), pada tips ini pun dapat dilakukan dengan dua cara, pertama, copy paste script pada gadget dan kedua, menambahkan kode pada kode css.

Cara Pertama
Copy Paste Script pada Gadget

Untuk mendapatkan tampilan kursor hanya pada bodi postingan dengan cara yang pertama ini, yang perlu kita lakukan adalah melakukan copy paste atas script berikut ini pada gadget blog kita. Berikut format script-nya.

HTML>BODY .post-body{cursor:url(“URL_Image_Kursor“), auto;}

Keterangan

Ganti URL_Image_Kursor dengan alamat URL atau direktori image kita

Misalkan alamat URL image kita adalah http://geocities.com/yono_pati/baby1.gif maka selengkapnya akan menjadi seperti di bawah ini.

HTML>BODY .post-body {cursor:url(“http://geocities.com/yono_pati/baby1.gif“), auto;}

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
Menambahkan Kode Pada CSS

Selain cara di atas, kita juga dapat melakukannya dengan merubah pada kode css-nya. 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 .post-body {
Bagi pengguna Firefox, untuk mempermudah pencarian, gunakan Ctrl+F

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

cursor : url(“URL_Image_Kursor“), auto;

Sehingga selengkapnya menjadi seperti di bawah ini.

.post-body {
cursor: url(“http://geocities.com/yono_pati/baby1.gif”), auto;
……………………..
……………………..
}

Kelima, simpan template
Keenam, selesai

Sekali lagi yang tidak ingin repot-repot membuatnya, kita dapat mengambil image untuk kursor di http://totallyfreecursors.com/. Di sana, tersedia ratusan bahkan ribuan image untuk kursor ini dengan berbagai pilihan dan kategori.

Selamat Mencoba!!

Baca juga yang ini

Kustomasi Kursor Pada Teks Tertentu Dalam Postingan

Merubah Tampilan Kursor Pada Bodi Blog
Membuat Postingan Dua Kolom
Kumpulan Script Untuk Mempercantik Blog

Iklan

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.

HTML,BODY{cursor:url(“URL_Image_Kursor“), auto;}

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.

HTML,BODY{cursor:url(“http://www.geocities.com/yono_pati/baby1.gif“), auto;}

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

Kustomasi Kursor Mouse Pada Teks Tertentu

Kustomasi Kursor Mouse Pada Teks Tertentu Pada Postingan : Ketika sebuah kursor mouse didekatkan kepada suatu objek atau teks maka bentuk kursor akan berubah sesuai dengan “sifat” objek atau teks tersebut. Jika objek atau teks tersebut merupakan suatu link maka bentuk kursor akan berubah menjadi seperti tangan dan apabila hanya objek atau teks biasa maka bentuk kursornya akan berubah menjadi seperti huruf i kapital ( I ).

Dengan tips berikut ini, kita dapat mengkustomasi kursor mouse sesuai dengan selera kita masing-masing. Artinya, walaupun suatu teks bukan merupakan suatu link namun kita dapat menjadikan bentuk kursor menjadi seperti sebuah link ketika melewati teks tersebut, yaitu seperti bentuk tangan.

Seperti kita ketahui bahwa ada 7 (tujuh) bentuk kursor yaitu, pointer (hand), crosshair, text, wait, move, help, and resize, masing-masing direpresentasikan seperti gambar di bawah ini.

Nah, bagaimana cara untuk mendeskripsikan bentuk-bentuk kursor tersebut ke dalam postingan atau ke dalam tag yang lain? Berikut ini formatnya.

<span style=”cursor: tipe_kursor;”> Teks

Pilihan bentuk/tipe kursornya adalah sebagai berikut.

“cursor:pointer”
“cursor:crosshair”
“cursor:text”
“cursor:wait”
“cursor:move”
“cursor:help”
“cursor:n-resize”
“cursor:s-resize”
“cursor:e-resize”
“cursor:w-resize”
“cursor:ne-resize”
“cursor:nw-resize”
“cursor:se-resize”
“cursor:sw-resize”

Keterangan

n = north
s = south
e = east
w = west
ne = north east
nw = north west
se = south east
sw = sout west

Contoh penggunaan

<span style="cursor: pointer;”> Contoh penggunaan kustomasi bentuk kursor

Dengan contoh tersebut, ketika sebuah mouse melewati (mendekati) tulisan “Contoh penggunaan kustomasi bentuk kursor” maka mouse akan berubah menjadi seperti bentuk tangan, seperti contoh di bawah ini. Coba dekatkan mouse ke teks di bawah ini!!

Contoh penggunaan kustomasi bentuk kursor

Selamat Mencoba!!

Lebih lanjut tentang kursor ini dapat dilihat pada postingan “Merubah image atau tampilan kursor pada blog” dan Mengkustomasi Tampilan Kursor Pada Bodi Postingan.
(referensi : dynamicdrive)