Tutorial Image Bubbles Menggunakan CSS3

Kembali dengan yang lagi-lagi tentang css, saya harap sobat tidak bosan dengan tulisan saya yang melulu mengenai css. Karena memang saat ini css lagi mengalami perkembangan pesat, oleh karenanya saya mencoba memberikan sedikit tips mengenai css3. Yang akan saya bahas disini adalah css image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa sobat lihat disini.

 

image

 

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. Copas kode css berikut sebelum kode ]]></b:skin>
    .bubblewrap{
    list-style-type:none;
    margin:0;
    padding:0;
    }

    .bubblewrap li{
    display:inline;
    width: 65px;
    height:60px;
    }

    .bubblewrap li img{
    width: 55px;
    height: 60px;
    border:0;
    margin-right: 12px;
    -webkit-transition:-webkit-transform 0.1s ease-in;
    -o-transition:-o-transform 0.1s ease-in;
    }

    .bubblewrap li img:hover{
    -moz-transform:scale(1.8);
    -webkit-transform:scale(1.8);
    -o-transform:scale(1.8);
    }

  5. Cari kode yang mirip seperti ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/>
    </b:section>
    </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.

 

Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, sobat bisa ganti dengan gambar social bookmark yang sobat punya.

 

Semoga bermanfaat, and happy nice weekend ! Hot

Berlangganan artikel terbaru via Email
Artikel Lainnya :

6 comments

18 Oktober 2010 pukul 09.43

MANTAP NICH INFONYA
SUKSES SELALU KAWAN

13 Desember 2010 pukul 13.04

prakteekan mas.. :)
makasie infonya

22 April 2011 pukul 09.48

@ViKrY'X MadZ : bisa sob

13 Juli 2011 pukul 21.11

nice script gan, k TKP lagi hehe
sy baru edit template maklum pemula gan hehe
visitback yah

6 November 2011 pukul 10.45

kalau pake ini, blog terasa berat gak mas ?

17 November 2011 pukul 02.05

gan kalo penempatannya di kanan sama jejer ke kanan bukan kebawah gmn script nya nih mas

Posting Komentar

Reader Community

Recent Comments