Cara Membuat Widget Sosial Keren

Pada postingan Kali ini saya akan berikan sesuatu yang keren buat blog Anda,yaitu widget media sosial yang keren seperti tab pada windows 8.

Lihat Demonya dulu DISINI

Untuk prakteknya langsung saja kita praktekan cara menambahkan ke widget blogger :

1. Langsung ke Blogger Dashboard --> Layout--> klik "Add a gadget".

2. Pilih "html/java script" copy dan pastekan kode dibawah ini.

<div class="metro-social">
<li><a class="fb" href="URL Facebook Anda"></a></li>
<li><a class="tw" href="URL Twitter Anda"></a></li>
<li><a class="gp" href="URL GooGle + Anda "></a></li>
<li><a class="fd" href="URL FeedBurner Anda"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style>
<br />

3. Ganti "URL ..... Anda" dengan URL Media sosial Anda.

4. Klik Simpan Template.

Semoga Bermanfaat !