Cara Merubah Cursor Blogger Blog Dengan Cursor Unik - BBT: Tutorial langkah demi langkah cara merubah cursor blogger blog dengan cursor unik sesuai keinginan kita masing - masing, mudah dan cepat

Cara Merubah Cursor Blogger Blog Dengan Cursor Unik

Sobat semua tentu sudah tahu dong apa itu cursor / kursor ?

Itu lo, tanda panah yang terlihat pada layar komputer / laptop yang bisanya kita gunakan untuk menunjuk / memilih sesuatu yang ada di komputer / laptop (misalnya untuk menunjuk / memilih folder atau aplikasi, dsb).

Pernah melihat sebuah blog / website menggunakan cursor unik / berbeda dari cursor standar ?

Nah, pada kesempatan kali ini saya akan menuliskan tutorial bagaimana cara merubah cursor blogger blog dengan cursor unik (berbeda dari cursor standar).

Oke tidak perlu panjang lebar, mari kita mulai tutorial ini satu persatu, perhatikan dan pahami ya sobat, jangan asal copy paste (copas) kode saja.

Cara Merubah Cursor Blogger Dengan Cursor Unik / Sesuai Keinginan Kita

Untuk cara merubah cursor blogger blog ini saya akan menuliskan 2 cara, dan silakan sobat pilih / gunakan salah satu cara yang menurut sobat lebih mudah atau lebih sobat suka.

Cara 1# Mengganti Cursor Blogger Dengan Cara Edit Template Yang Digunakan

Cara pertama yang bisa kita lakukan untuk mengganti cursor blogger yaitu dengan cara mengedit template yang kita gunakan saat ini (menyisipkan sedikit kode css).

Untuk lebih detailnya silakan ikuti langkah - langkah berikut :
  • Masuk ke Dasbor blogger (jika belum)
  • Buka halaman Template
  • Backup dahulu template yang sobat gunakan sebagai jaga-jaga saja, caranya klik tombol Cadangkan/Pulihkan
  • Klik tombol Edit HTML
Cara Merubah Cursor Blogger Lewat Edit HTML Template
Pada halaman editor template blogger silakan cari kode body {
atau detail kodenya kurang lebih seperti ini

body {
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight:300;
    line-height:1.6em;
    color:#656565;
}
Setelah kode tersebut sobat temukan, selanjutnya sisipkan kode css di bawah nanti tepat setelah kode ini body {

cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;
}
Sehingga hasil kode css akan menjadi seperti ini

body {
cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.6em;
color:#656565;
}
Jangan lupa ganti tulisan Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi dengan Link / Tautan Gambar yang akan dijadikan Cursor, misalnya dengan gambar ini
Cursor
dan Link / Tautan gambar tersebut adalah ini http://downloads.totallyfreecursors.com/thumbnails/work54.gif
Maka hasil kode css tersebut menjadi seperti ini

body {
cursor: url("http://downloads.totallyfreecursors.com/thumbnails/work54.gif"), auto;
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.6em;
color:#656565;
}
Setelah itu jangan lupa klik Tombol Simpan template / Save template.

Sekarang silakan lihat blog sobat, seharusnya cursor blog sobat sekarang sudah berubah dengan cursor baru.

Cara 2# Merubah Cursor Blogger Dengan Cursor Unik Tanpa Template

Selain dengan cara mengedit template, ada cara lain yang bisa kita gunakan untuk merubah cursor blogger, dan menurut saya cara ini lebih mudah dan tanpa resiko template error.

Adapun langkah - langkah yang harus sobat lakukan adalah :
  1. Masuk ke Dasbor Blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget
  4. Pilih Gadget HTML/JavaScript
  5. Masukkan kode CSS untuk merubah cursor blog yang akan saya sertakan di bawah nanti pada bagian Konten / Content.
  6. Edit bagian kode yang harus di edit
  7. Terakhir klik Simpan / Save, dan selesai.
Cara Merubah Cursor Blogger Lewat Tata Letak
Berikut kode CSS untuk merubah cursor blog yang harus sobat masukkan pada bagian konten Gadget HTML/JavaScript

<style type="text/css">
body{cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;}
</style>
Jangan lupa ganti tulisan Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi dengan alamat Link / Tautan gambar yang ingin sobat jadikan sebagai cursor.

Contoh :
Kita ingin menjadikan gambar ini sebagai cursor
Cat Cursor
Dan Link / Tautan Gambar untuk gambar tersebut adalah http://downloads.totallyfreecursors.com/thumbnails/lazycat.gif

Maka hasil kode CSS tersebut menjadi seperti ini

<style type="text/css">
body{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/lazycat.gif"), auto;}
</style>
Silakan pelajari dan perhatikan perbedaan kode css mentah dengan kode css jadi agar sobat dapat gonta ganti cursor blog dengan gambar lainnya.

Mau menggunakan gambar lain untuk cursor blog sobat ?

berikut ada beberapa Link gambar yang bisa sobat gunakan sebagai cursor
Cursor 1 http://downloads.totallyfreecursors.com/thumbnails/lazycat.gif
Cursor 2 http://downloads.totallyfreecursors.com/thumbnails/foxwag.gif
Cursor 3 http://downloads.totallyfreecursors.com/thumbnails/unicorn.gif
Cursor 4 http://downloads.totallyfreecursors.com/thumbnails/work54.gif
Cursor 5 https://2.bp.blogspot.com/-s-mlkxZpsAU/VsOqooEwQvI/AAAAAAAAEyY/cVeRlIRmJ7Q/s1600/kursor-bulu.gif
Link gambar untuk cursor no 1 - 4 di atas saya dapat dari situs www. totallyfreecursors.com
Sobat bisa menggunakan situs ini untuk mencari gambar lain untuk cursor blog sobat, karena di sana sobat akan mendapatkan banyak gambar untuk cursor yang siap digunakan secara gratis.

Link gambar untuk cursor no 5 adalah gambar yang saya upload sendiri di blogger yang menghasilkan link tersebut.

Jadi, jika sobat memiliki gambar unik / lucu yang ingin dijadikan sebagai cursor, maka sobat bisa menguploadnya ke blogger, kemudian ambil link gambar tersebut sebagai Link / Tautan Gambar Cursor.
Sobat tentu sudah tahu kan bagaimana cara upload gambar di blogger :-)

Cursor di blog saya berubah jadi cursor standar saat cursor saya arahkan ke content yang memiliki link, misalnya ketika kursor saya arahkan ke menu di blog.
Bagaimana caranya agar cursor tetap sama (tidak berubah) walau diarahkan ke link ?

Oke, jika sobat menginginkan cursor blog sobat berubah secara permanen (tetap sama walau diarahkan ke link), maka sobat harus menambahkan sedikit kode css lagi, yaitu :

body a:hover {
cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;
}
Sehingga hasil kode css menjadi seperti ini

Jika menggunakan Cara 1# (Edit Template)

body {
cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.6em;
color:#656565;
}
body a:hover {
cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;
}
Jika Menggunakan Cara 2#

<style type="text/css">
body{cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;}
body a:hover{cursor: url("Masukkan Link / Tautan Gambar Di Sini Tanpa Spasi"), auto;}
</style>
Nah, itulah 2 cara mengganti cursor blogger yang bisa kita gunakan untuk mengganti cursor blog blogger dengan cursor unik sesuai keinginan kita masing - masing.

Cara ini sebenarnya tidak hanya bisa diterapkan pada blogger saja, akan tetapi semua blog (misalnya seperti wordpress) mapun website bisa menggunakan cara ini untuk mengganti cursor, karena intinya sama saja, yaitu penambahan kode CSS seperti yang sudah saya tuliskan di atas.
Cursor 1 Cursor 2 Cursor 3
Cursor 4 Cursor 5
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Merubah Cursor Blogger Blog Dengan Cursor Unik yang ada di blog ini bermanfaat buat sobat