Cara Membuat Widget Social Media Metro UI Sidebar Diblog

Fungsi Widget Ini Ialah Untuk Memudahkan Para Pengunjung Menghubungi Sang Pemilik Blog Atau Untuk Mendapatkan Informasi seputar Blog yang dikunjunginya. Ok, apabila anda berminat untuk memasang widget ini, silahkan ikuti Tutorial yang saya berikan

1. Masuk Ke Akun Blogger Anda
2. Pilih Akun Blogger Anda
3. Pilih Menu Tata Letak
4. Klik Tombol "Tambahkan gadget" Atau "Add Gadget"
5. Pilih HTML/JavaScript
6. Masukkan Kode Berikut Ini

<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/lSClFallenAngel"></a></li>
<li><a class="tw" href="http://twitter.com/nandangchester"></a></li>
<li><a class="gp" href="https://plus.google.com/118045572195415733039"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/NandangTechno"></a></li>


<style>
.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></div>

7. Klik SIMPAN

CATATAN :
Ganti Kode Yang Berwarna Merah Dengan Username anda di facebook, twitter, google plus, dan feedburner

DEMO, SILAHKAN DILIHAT DI BLOG NANDANG-TECHNO.BLOGSPOT.COM, DISIDEBAR