Cara menambah effeck bubble atau membesar saat kursor di dekatkan di blogger - by s2c3rr

1. Login Blogger.com
2. Di dasbor pilih Rancangan/design >> Edit HTML

3. Expand template widget

4. Cari kode ]]></b:skin> dan setelah ketemu letakkan kode di bawah ini 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. Save template.
6. Untuk pemanggilannya perhatiakan kode di bawah ini.

<ul class="bubblewrap">
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

7. Kode diatas hanya contoh saja sobat bisa mengembangkannya lagi.

Share this: