Senin, 22 Desember 2008

Membuat Cursor Animasi

Cursor animasi ini dapat membuat pengunjung menjadi lebih betah berada di blog kawan karena bentuknya yang unik dan menarik. Untuk membuatnya pun sangat mudah, jika ingin membuatnya silahkan ikuti langkah-langkah berikut :


Langkah pertama==> kawan siapkan gambar animasi cursor yang ingin dijadikan cursor di blog kawan. Salah satu situs penyedianya adalah http://www.myspacecursor.net

Langkah kedua==> menyimpan file animasi yang sudah didapatkan ke hosting tempat menyimpan gambar, contohnya di http://www.photobucket.com atau di blogger sendiri juga bisa. Jika gambar animasi sudah si upload, catat alamat link gambar tersebut. Sebagai contoh, saya punyai gambar cursor berbentuk kelinci dengan alamat sebagai berikut :

http://i654.photobucket.com/albums/uu263/lawuh/cursor.gif


Langkah selanjutnya adalah menyisipkan kode untuk cursor. Kode untuk membentuk cursor adalah sebagai berikut :

cursor: url("alamat gambar kursor");

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

cursor: url("http://i654.photobucket.com/albums/uu263/lawuh/cursor.gif");

Langkah selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template sobat, 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 :


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, menjadi seperti ini :


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://i654.photobucket.com/albums/uu263/lawuh/cursor.gif");
}

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 :


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 :


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
cursor: url("http://i654.photobucket.com/albums/uu263/lawuh/cursor.gif");
}

7. Klik tombol Simpan Template

8. Selesai. Coba lihat hasilnya.


Atau ada juga cara lain, yaitu di tempatkan di dalam kode <body>, kawan tinggal menyisipkannya sehingga kodenya jadi seperti ini


<body style='CURSOR: url("http://i654.photobucket.com/albums/uu263/lawuh/cursor.gif")'>


Untuk melihat contoh blog yang memiliki animasi cursor silahkan klik disini tapi mungkin ada mungkin ga'

Tidak ada komentar:

Posting Komentar

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger