Membuat Efek Timbul pada Banner

Kali ini kita akan membahas tentang cara membuat efek timbul pada banner. Anda tahu kan efek timbul atau relief, yang biasa ada di candi-candi itu, Kita bisa membuat efek timbul pada Banner. Nah, Kita akan mencoba membuat efek timbul pada banner. Tetapi, pada saat mouse berada diatasnya, image akan tampak seperti tenggelam.

1. Seperti biasa, kita login ke Blogger terlebih dahulu.

2. Tuju Tata Letak > Edit HTML.

3. Backup dulu templatenya. Sudah tau kan cara membackup template?

4. Cari kode:

]]></b:skin>

5. Taruh kode ini diatasnya.

.banner, img.banner{
border: 5px outset;
border-color:#FFFFFF #000000 #000000 #FFFFFF;
}
.banner:hover, a:hover .banner{
border: 5px inset;
border-color: #585858 #A4A4A4 #A4A4A4 #585858;
}

6. Simpan.

Kini anda bisa meletakkan banner tersebut di postingan atau di sidebar. Untuk meletakkannya di sidebar, tuju menu Elemen Halaman, lalu klik Tambah Gadget, lalu pilih HTML/Javascript. Lalu, isikan bagian isi dengan kode berikut.

<ahref="LINKYANGDIINGINKAN"><imgclass="banner" src="URLGAMBAR" /></a>

Ganti LINKYANGDIINGINKAN dengan link yang diinginkan. Sedangkan URLGAMBAR dengan URL dari gambar yang akan dibuat timbul. Lalu simpan.

Anda juga bisa memasukkannya di posting dengan mode Edit HTML. Masukkan kode yang sama dengan yang diatas, lalu klik Terbitkan Entri.

Selamat mencoba...