Widget Unik Social Metro Efek Zoom

Widget Unik Social Metro Efek Zoom - Kurang afdol jika sebuah blog yang keren namun tidak terpasang widget social media, karena biar bagaimanapun kehadiran social media sangat berpengaruh bagi popularitas sebuah blog. Masih berkaitan tentang widget unik khususnya bagi mereka para blogger yang menggunakan template blog metro, yaitu membuat widget social media ala metro dengan efek zoom.

Untuk tampilannya seperti dibawah ini :

• DEMO

Selanjutnya untuk cara pemasangannya :

Masuk ke Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<style type="text/css" scoped="scoped">
.vn-metrozoom {list-style-type:none;margin:0;padding:0;}
.vn-metrozoom li{display:inline;width: 60px;height:60px;}
.vn-metrozoom li img{width: 40px;height: 40px;border:0;margin-right: 4px;-webkit-transition:-webkit-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in}
.vn-metrozoom li img:hover{-moz-transform:scale(1.8);-webkit-transform:scale(1.8);-o-transform:scale(1.8);}
</style>

     <ul class="vn-metrozoom">
<li><a href="#"><img src="http://i.imgur.com/6AI7jNU.png" title="Facebook"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/qWbojzO.png" title="Twitter"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/g8dACcy.png" title="Google +"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/WOWCE5P.png" title="Youtube"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/SgONHEw.png" title="RSS Feed"/></a></li>
</ul>

Ganti tanda # warna merah dengan URL data blog anda

Demikian tips widget unik kali ini, dan semoga tetep bermanfaat.
Happy Blogging

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit