Catetan

MEMBUAT BANNER ANIMASI CSS3 DI BLOGGER 8

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.

8 comments:

Blog Dasista

7 Jan 2011 17.17.00
mkasih kak....
sya cba dlu deh ya,,,..
he..he

izin Follow ya...
madingku.com

19 Jan 2011 10.05.00
terima kasih
aahym

3 Feb 2011 00.15.00
Mkasih tips-tipsnya............
Jester Jp

3 Mar 2011 09.12.00
Cra edit a gmana kak..
Team NSI

17 Apr 2011 21.02.00
bagus sekali postnya...
Asep Janim

15 Mei 2011 18.49.00
bagi2 doong
bersediabelajar

13 Jun 2011 09.27.00
thx mas sdh mau berbagi ilmu, salut utk blog mas karsono, sdh banyak membantu utk diterapkan ilmu2nya diblogku yg masih br, apakah bs bantu mas buat menu n templete seperti di blognya mas karsono, mhn bs dikirim panduan n sriptnya ke emailku ya: bersediabelajar@gmail.com, salam kenal fr: www.bersediabelajar.blogspot.com
JimmyShow

1 Jul 2011 15.31.00
mengapa aku pake bowser ie dan firefox efek animasi kok ga bisa ya,
tapi kalau pake google chrome
matur suwun

Posting Komentar