Cara memasang Metro Style Sosial widget

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Assalamualaikum Wr.wb

Hari ini saya akan memberikan tambahan yang sangat bagus untuk blog Anda dan terus terang saya suka ini widget karena widget tersebut sangat simpel. Ini adalah situs jejaring sosial widget pada bentuk Metro seperti di windows 8, widget ini mungkin sudah banyak orang yang tau, tapi kalau ada yang belum tau maka saya share (berbagi ilmu) dari pada ilmu saya simpan sendiri (gak manfaat) biarkanlah ilmu itu bersebaran luas dimana-mana tapi intinnya saya sudah amalkan ke warga-warga bloggers untuk dicoba & dipraktekkan :D langsung aja carannya :
Oh iya untuk DEMO nya klik Gambar dibawah ini :

Demo

Langkah-langkahnya sebagai berikut :
1. Login ke akun Blogger sobat.
2. Pergi ke  Blogger Dashboard   →  Tata Letak  →  klik "Add a gadget" .
3. Pilih "Html/JavaScript" lalu Letakkan Kode dibawah ini :

<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Script Widget Metro Style Sosial By http://ilu5i.blogspot.com*/
.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>

3. Klik Simpan → Simpan setelan.
4. Selesai

✍ Catatan :
Ganti text "Your Facebook URL here" dengan URL anda
Ganti text "Your Twitter URL here" dengan URL anda
Ganti text "Your GooGle + URL here" dengan URL anda
Ganti text "Your FeedBurner URL here" dengan URL anda

 Saya harap Anda bisa menikmati widget tersebut & Happy Bloggers :D

Wassalamualaikum Wr.wb