Membuat Efek Timbul pada Banner

Assalamualaikum. Akhir-akhir ini santer terdengar isu tentang RUU nikah siri. Katanya, kalo nikah siri bakalan dipidana. Tapi saya tidak setuju sama RUU ini. Ok, setuju nggak setuju, itu kan kebebasan berpendapat. Lagipula saya tidak akan berbicara tentang RUU nikah siri ini. Tapi, nggak papa. Cuma nembak keyword aja... Lagipula saya nggak suka siri, saya sukanya cengkeh...

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. Contohnya bisa anda lihat di http://beritaduniamaya.blogspot.com.

Sudah lihat kan? Tertarik? Begini nih, cara membuatnya.

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.

<a href="LINKYANGDIINGINKAN"><img class="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...

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya