MEMBUAT BANNER ANIMASI CSS3 DI BLOGGER 9

Apa sich gunanya ngeblog... ga ada untungnya sama sekali...? itu merupakan salah satu kata-kata yang pernah aku terima, kalau dipikir-pikir keuntungan ngeblog sendiri tergantung dari sisi mana orang ngeliatnya.

Kalau secara batin, jelas menguntungkan, karena ngeblog itu sudah bisa dikatakan sebagai hobi, sedangkan kalau dilihat dari sisi keuntungan material, ngeblog itu membutuhkan biaya yang lebih dan proses yang panjang, sehingga keuntungan dari sisi material bisa tercapai, tetapi hal tersebut tergantung juga dari sisi jiwa para bloggernya, apakah matre atau tulus untuk pengetahuan....

Kalau ngomongin masalah itu ribet dah pokoknya, karena sudah berhubungan dengan prinsip seseorang...

Nach... berhubung ngomongin keuntungan ngeblog, berikut ini saya akan coba membuat, salah satu keuntungan dari ngeblog, yaitu dengan memasang iklan banner, dengan sentuhan animasi murni dari kode CSS3, di blogger, contohnya bisa dilihat pada DEMO disini.

Sebelumnya aku juga sudah pernah membuat posting mengenai iklan di tengah postingan, yang mungkin bisa dijadikan referensi.

Cara membuat banner animasi dengan CSS3, sangatlah mudah, dikarenakan seperti postingan saya sebelumnya mengenai CSS3, Kode yang diperlukan sangat murni dari kode CSS3, jadi tidak ada tambahan script yang lain.

Hal pertama yang diperlukan adalah membuat kode CSS3-nya, dimana kode ini penempatannya pada blogger adalah diatas kode

]]></b:skin>

Untuk Animasi Banner CSS3 sendiri, saya buat menjadi beberapa animasi saja, sisanya mungkin bisa dilanjutkan lain kali.

1. Animasi Zooming CSS3 Banner
kode CSS3-nya :

#zoom{position:relative; height:125px;width:125px;}
#zoom img{position:absolute;left:0;-webkit-transition:all 0.5s ease-in-out}
#zoom img.awal{-webkit-transform:scale(0,0);}
#zoom:hover img.awal{-webkit-transform:scale(1,1);-webkit-transform-origin:center}
#zoom:hover img.akhir{-webkit-transform:scale(0,0);-webkit-transform-origin:center}

2. Animasi Rotasi CSS3 Banner
kode CSS3-nya :

#rotasi{ position:relative; height:125px; width:125px;}
#rotasi img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#rotasi img.awal{-webkit-transform:scale(1,0);}
#rotasi:hover img.awal{-webkit-transform:scale(1,1)}
#rotasi:hover img.akhir{-webkit-transform:rotate(360deg) scale(0,0)}

3. Animasi Slide Horisontal CSS3 Banner
kode CSS3-nya :

#horisontal{ position:relative; height:125px; width:125px; overflow:hidden;}
#horisontal img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#horisontal:hover img.awal{-webkit-transform:scale(1,1)}
#horisontal:hover img.akhir{-webkit-transform:translate(125px,0)}

4. Animasi Slide Vertikal CSS3 Banner
kode CSS3-nya :

#vertikal{ position:relative; height:125px; width:125px; overflow:hidden;}
#vertikal img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#vertikal:hover img.awal{-webkit-transform:scale(1,1)}
#vertikal:hover img.akhir{-webkit-transform:translate(0,125px)}

Dan sedikit informasi, kode yang membuat animasi berjalan sesuai dengan perintah intinya adalah yang diberi warna merah.

Setelah itu, kita bikin kode HTMLnya, dimana kode ini bisa diletakkan pada ADD Gadget, sedangkan untuk posisinya, dilihat yang paling pas di sebelah mana.

<table border="0" width="100%" cellpadding="5" cellspacing="5" ><tr><td>
<div id="zoom">
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban1_1.gif" width="125" height="125" /></a>
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban2_6.gif" width="125" height="125" /></a>
</div>
</td><td>
<div id="rotasi"><a href="http://eepurl.com/b68VD" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/mailchimp2_6.gif" width="125" height="125" /></a>
<a href="http://eepurl.com/b68VD" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/mailchimp_0.gif" width="125" height="125" /></a>
</div>
</td></tr><tr><td>
<div id="horisontal"><a href="http://a9eb8abdtjznew3fp8w2d5ku2x.hop.clickbank.net/?tid=2TL3LDTB" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/xl2_5.gif" width="125" height="125" /></a>
<a href="http://a9eb8abdtjznew3fp8w2d5ku2x.hop.clickbank.net/?tid=2TL3LDTB" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/xl2.png" width="125" height="125" /></a>
</div>
</td><td>
<div id="vertikal"><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban2_6.gif" width="125" height="125" /></a>
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban1_1.gif" width="125" height="125" /></a>
</div>
</td></tr></table>

Untuk posisi banner disini saya sesuaikan dengan kondisi banner di blog ini dengan menggunakan table... dan kode html yang membuat banner animasi berfungsi adalah kode yang diberi warna merah...

Demikianlah sehingga keuntungan material dari blogger bisa tercapai, tetapi tidak ada keuntungan yang bisa melebihi dari ucapan terima kasih.