Cara Membuat Image Bubbles CSS3

Sebelum memulai ada baiknya sobat backup template sobat terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.

1. Login ke Blogger.
2. Klik Rancangan.
3. Masuk ke Edit HTML.
4. Copy paste kode css berikut sebelum kode ]]></b:skin>

.bubblewrap{ <br /> list-style-type:none; <br /> margin:0; <br /> padding:0; <br /> }<br /> .bubblewrap li{ <br /> display:inline; <br /> width: 65px; <br /> height:60px; <br /> }<br /> .bubblewrap li img{ <br /> width: 55px; <br /> height: 60px; <br /> border:0; <br /> margin-right: 12px; <br /> -webkit-transition:-webkit-transform 0.1s ease-in; <br /> -o-transition:-o-transform 0.1s ease-in; <br /> }<br /> .bubblewrap li img:hover{ <br /> -moz-transform:scale(1.8); <br /> -webkit-transform:scale(1.8); <br /> -o-transform:scale(1.8); <br /> }

   5.  Cari kode yang mirip seperti ini :

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <br /> <b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/> <br /> </b:section> <br /> </div>

   6.   Kemudian letakkan kode berikut setelah kode diatas :

<div class='bubblewrap'><ul><li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li> <li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li> <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li> <li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li> <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li> </ul></div>

     7. Simpan Template.

Semoga bermanfaat, and happy nice weekend ! 

Jika menurut sobat artikel ini bermanfaat, silahkan vote ke Lintas Berita agar artikel ini bisa di baca oleh orang lain.

Related Post

Share To Your Friends

• 
• 
• 
• 
• 
• 
•