Cara Membuat Cursor Blog Sendiri


Udah beberapa bulan lebih juga gue,gak pernah lagi bikin tutorial tutorial lagi di blog ini,karena kan biasa nya gue kalo bikin tutorial di blog gue yang satu lagi. Cuma,untuk mengisi kekosongan di hati gue,postingan postingan di blog ini,karena gue juga binggung mau ngepost apaan,yaudah deh,gue share tutorial aja.

Tutorial kali ini adalah,Cara Membuat Cursor Blog Sendiri,"bentar,bentar,ini maksud nya gimana? kita bikin cursor di blogger nya gitu? emang bisa?","bukan bego,pertama kita bikin cursor dulu di photoshop,terus baru deh kita ambil url gambar nya,masukin deh kode nya ke dalam blog kita","ohhhh gitu? gue kira bikin cursor nya lewat blogger","ya gak bisalah".

Tutorial ini,kalian bisa custom sendiri cursor di blog kalian,bisa bikin sendiri,ataupun bisa juga kalian ambil gambar cursor nya di google yang udah banyak banget bertebaran (silahkan dicari sendiri ya,masa gue lagi). kalo gue sih mendingan bikin sendiri,lebih ada ciri khas nya gitu hahahaha.

Langsung aja,yuk kita buat cursor nya

Bahan : - Photoshop (versi berapa aja,usahain cs5 ke atas ya,kalo gue pake photoshop cc)
             - Kreatifitas

1. Buka Photoshop nya,pilih file > new (atau tekan CTRL+ALT+N)


buat dengan ukuran 100x100 px,lalu klik OK

kok gede banget gan? karena kebanyakan cursor itu ukuran nya adalah 32x32 px,kecil banget kan? maka nya kita bikin ukuran nya lebih gede dulu,biar waktu kita buat nanti lebih mudah,jadi gak usah kita zoom zoom,setelah di save nanti,baru kita buat new lagi,dengan ukuran asli nya.

 2. Klik new layer,seperti gambar dibawah ini


3. Kemudian,pilih rectangle tool (atau tekan tombol U di keyboard kalian),setelah itu klik kanan,pilih Custom shape tool


4. Pilih bentuk shape yang mana aja,sesuai dengan kreatifitas kamu,untuk tutorial ini,kita pilih shape tanda panah aja


5. Tinggal tarik diatas layer tadi


6. Ini optional,pilih tool text,atau tekan T di keyboard kamu,tulis apa aja di samping cursor nya


7. Pada bagian layer,hapus layer Background dengan cara,klik 2x di layer Background nya,klik OK aja


8. Kalo udah,seret layer Background nya,ke icon tongsampah,buat hapus layer Background nya,ini supaya cursor nya menjadi transparan


9. Udah jadi kan?


10. Tekan CTRL+S untuk save,pilih format PNG


sekarang kita akan membuat dengan format asli nya,yaitu ukuran 32x32,tenang aja kita gak mulai dari awal lagi kok,cursor yang udah kita buat tadi,tinggal di resize aja ke ukuran tersebut

11. klik File > New,buat dengan ukuran 32x32 px


12. kalo udah,tekan CTRL+O untuk memasukkan cursor yang udah kita buat tadi,klik Open


13. Klik pada tab di atas,seret ke samping (ke layer yang udah kita buat tadi)



klik gambar nya,seret ke layer tadi

14. Tekan CTRL+T untuk resize ukuran,atur ukuran nya sesuai layer


15. Jadi seperti ini


16. Save lagi dengan format PNG ya

Sekarang kita upload file gambar nya,untuk menggambil url gambar,sebenar nya banyak banget buat hosting gambar di google,tapi untuk cara mudah nya,gue biasanya untuk menggambil Url gambar,gue upload di postingan blogger,terus klik kanan pada gambar pilih Copy image address,cara nya seperti ini

17. Buat postingan baru,upload file gambar cursor tadi


18.  Klik digambar nya,pilih Original size


19. Klik kanan,pilih Copy image address



Kalo udah di copy url gambar nya,sekarang kita akan langsung menerapkan di blog,dengan memasukkan kode dibawah ini,masukkan kode dibawah ini pada Tata letak > Pilih widget Html/javascript

<style type="text/css">body{cursor: url("url gambar cursor sebelum di klik"), auto;}body a:hover{cursor: url("url gambar cursor ketika di klik"), auto;}</style>

karena kode cursor ini dua fungsi,jadi yang pertama cursor sebelum di klik,yang kedua ketika ada link,gambar cursor nya akan berubah menjadi lain lagi,ganti kedua kode tersebut dengan url gambar yang berbeda,sesuai dengan keterangan ya.

kalo udah,nanti akan menjadi seperti ini

<style type="text/css">body{cursor: url("http://3.bp.blogspot.com/-f83GJSJeXw4/TkCIJo2nRKI/AAAAAAAAABU/WZFhGqHwJFw/s1600/jasablogsitus-web-id.gif"), auto;}body a:hover{cursor: url("http://3.bp.blogspot.com/-f83GJSJeXw4/TkCIJo2nRKI/AAAAAAAAABU/WZFhGqHwJFw/s1600/jasablogsitus-web-id.gif"), auto;}</style>

Klik Save,dan liat hasil nya.

Sorry kepanjangan,kalo gue bikin tutorial versi vidio nya,malah ini post gak ada isi hahahaha. jadi yaudah deh enjoy aja.

sekian tutorial kali ini.

0 komentar:

Posting Komentar

My Instagram