Saturday, June 11, 2011

Membuat Cursor Bergambar

Untuk membuat sebuah kursor gambar, langkah pertama yang harus di lakukan adalah membuat sebuah gambar yang berukuran kecil, untuk yang ini terserah kepada keahlian Anda, banyak software pembuat  gambar semisal photoshop  dll. Sebuah pertanyaan baru mungkin muncul yaitu bagaimana apabila kita tidak menguasai program tersebut, kan jadi ribet persolaannya. Jika Anda tidak bisa membuat sebuah gambar  untuk di pakai, jangan dulu putus asa. Anda bisa mencarinya di internet, ratusan atau bahkan ribuan situs menyediakan layanan ini. Caranya sangat mudah, Anda bisa mencarinya lewat search engine yang ada di sebelah kanan atas blog ini. Tuliskan keyword yang berhubungan, misal : Free cursor animated, cursor animation, Free cursor Alpabed atau di Mbah Google.com atau di keyword yang lainnya yang di rasa berhubungan dengan yang namanya kursor animasi. Silahkan kunjungi situs yang muncul, barangkali Anda akan menemukan situs yang tepat.

Langkah kedua yaitu menyimpan file gambar yang sudah Anda dapatkan ke hosting tempat menyimpan gambar, contoh : http://www.photobucket.com atau di blogger sendiri juga bisa.  Apabila gambar sudah si upload, catat alamat gambar tersebut. Sebagai contoh, saya mempunyai gambar cursor berbentuk orang lagi menyangkul dengan alamat sebagai berikut :

http://i1137.photobucket.com/albums/n520/oskartagane/tani.png
Langkah selanjutnya adalah menyisipkan kode untuk kursor. Kode untuk membentuk kursor adalah sebagai berikut :

cursor: url("alamat gambar kursor"), default;

Sebagai contoh, jika saya menggunakan alamat kursor yang saya miliki, kode nya jadi seperti ini :

cursor: url(" http://i1137.photobucket.com/albums/n520/oskartagane/tani.png"), default;

Langkah selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template Anda, agar lebih mudah untuk di pahami, saya tuliskan langkah-langkahnya : 



  • Untuk template klasik




    1. Sign in di blogger.
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode template yang ada, lalu save untuk backup data
    5. Cari kode yang mirip dengan kode di bawah ini, biasanya di tulis dengan body :
      6. body { background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
    6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :
      7. body{ background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; cursor: url("http://i1137.photobucket.com/albums/n520/oskartagane/tani.png), default; }
    7. Klik tombol Simpan Perubahan Template
    8. Selesai. Silahkan lihat hasilnya.


  • Untuk template baru




    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link Download template seluruhnya, save dulu untuk backup biar aman
    5. Cari kode yang mirip dengan kode dibawah, biasanya di tulis dengan body :
      6. body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: justify; }
    6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :
      7. body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: justify; cursor: url("http://i1137.photobucket.com/albums/n520/oskartagane/tani.png"), default; }
    7. Klik tombol Simpan Template
    8. Selesai. Silahkan lihat hasilnya.
    Atau ada juga cara lain, yaitu di tempatkan di dalam kode <body>, Anda tinggal menyisipkannya sehingga kodenya jadi seperti ini :


    Terima Kasih
    Posted by at
    Labels:

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)

    Comments system

    Disqus Shortname

    Disqus Shortname

    Comments System

    Disqus Shortname

    Comments system