Membuat widget keren social Profile Metro UI

Membuat widget keren social Profile Metro UI - Sahabat MW bagaimana kabarnya... semoga baik-baik aja. gini Gan kali ini saya ingin memposting kan cara membuat widget keren social Profile Metro UI supaya widget ini bisa membuat blog sahabat MW semakin keren sebelum ke tutorialnya saya kasih Preview nya di bawah ini :

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

• Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
• Copy dan paste kode berikut pada kolom konten: 

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/mwalidain.blog rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/MustaidulW></a></li>
<li><a class="gp" href="https://plus.google.com/101560192906077776792"></a></li>
<li><a class="pi" href=http://pinterest.com/MWalidain rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/MWalidain rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/MWalidain></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/MWalidain rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.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:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;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 .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Keterangan : Tulisan yang berwarna di tulis sesuai akun yang anda miliki

• Kemudian disimpan dan lihat hasilnya.