Tutorial: Make your own Cursor/pointer! - THE ANANDIC

February 12, 2013

Tutorial: Make your own Cursor/pointer!

wah, akhirnya nge-blog lagi, maklumlah baru ada bahan hehe . Jadi kali ini gue akan buat tutorial gimana mengganti dan membuat cursor/pointer pada blog. langsung aja deh tutorialnya, Cekidot! 

kalo kalian pengen ganti pointer, ada 2 pilihan, apakah mau pointer yang sudah ada ga perlu buat lagi gambarnya / mau pointer yang bener-bener buatan kalian, jadi selain kalian ga ada lg yang punya pointer tsb. (contohnya kaya yg di blog gue)



Pilihan pertama, kalian cukup cek cursors-4u.com, kemudian pilih pointer favorit kalian di categoris, disana ada berbagai macam pointer, dari yang lucu kaya pointer Hello Kitty, sampe simbol YinYang pun ada loh. setelah kalian memilih dan meng-klik pointer yang kalian suka, akan tampil laman seperti ini.


Kemudian copy kode yang ada di text box, pilih kode sesuai tampilan blog kalian, apakah tampilan blogger baru atau lama, jika lama pilih yang atas, sedangkan yang baru pilih di bawah.

Setelah meng-copy kode tersebut, kembali ke blog kalian, masuk ke template -> Edit HTML, sebelum meng copy-paste, pastikan kalian mencentrang "Expand template widget". kemudian, cari kode </head>. 
Mencari kodenya dengan cara, blok semua kode yang ada, kemudian klik CTRL + F, masukkan </head>
setelah kalian menemukan kode di atas, pastekan kode pointer awal, di atas kode </head>. Jika sudah jangan lupa pratinjau terlebih dahulu, apabila berhasil baru save.

Pilihan kedua, apabila kalian ingin membuat pointer kalian sendiri, sebelumnya kalian harus membuat dulu tulisan atau gambar pada pointer tersebut melalui photoshop. kalian bisa menggunakan gambar ini sebagai dasar. 
Bagi kalian yang ga tau step by step membuat gambar pointer di photoshop bisa cekidot videonya  bang Benakribo.

nah karena video bang bena dibikin tahun 2009, dan itu masih tampilan blog lama, jadi banyak yang ga sukses pas masukin kode HTMLnya.

setelah membuat gambar, upload di imageshack.us, kalian akan dpt kode gambar kalian. sebelumnya masukkan dulu kode ini di atas </head>

<style type='text/css'>
HTML,BODY{cursor: url(&quot;http://imageshack.us/a/img405/406/theanandiccursor.png&quot;), auto;}
</style>

dan ganti kode yang berwarna merah diatas dengan url kode gambar yang kalian dapatkan dari imageshack.us. viola! DONE.

Semoga bermanfaat ya 

No comments:

Post a Comment