Cara Membuat Widget Social Profile Metro-UI Di Blogger

Tampilan Widget Metro-UI blogger ini diadopsi dari Tampilan Windows-8 milik Microsoft, karena tampilannya keren dan mudah dipasang pada blog, paling pas dipasang di sidebar dengan ukuran sidebar 300px. Jika ingin memodifikasi bentuk dan warnanya tidak dirubah bagian kode CSS nya. Atau jika ada yang tidak ingin digunakan tinggal dihapus saja bagian yang tidak ingin ditampilkan. Ingin memasangnya di template blogger tidak susah kok. Cara membuat Widget Sosial Profile bergaya Metro-UI ini ikuti saja langkah sederhana dibawah ini:

Demo Here

1. Login ke Blogger.com
2. Dashboard ---> Layout ( tata letak ) ---> add gadget ( tambah Gadget )
3. Copy semua kode dibawah ini:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/dadangaprilianto rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/dadang_10_mm></a></li>
<li><a class="gp" href="https://https://plus.google.com/104270740930757841773"></a></li>
<li><a class="pi" href=http://the-kampung-cyber.blogspot.com rel="nofollow"></a></li>
<li><a class="in" href=https://the-kampung-cyber.blogspot.com/# rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/user/dadang918?guided_help_flow=1></a></li>
<li><a class="fd" href=http://the-kampung-cyber.blogspot.com rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:240px}
.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(http://goo.gl/PmrKh) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://goo.gl/rrPYG) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(http://goo.gl/bAJOi) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://goo.gl/3rxg3) no-repeat center center #d73532;width:140px;height:173px}
.metro-social .in{background:url(http://goo.gl/uwmHW) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://goo.gl/wVju1) no-repeat center center #e64a41;width:70px;height:50px}
.metro-social .fd{background:url(http://goo.gl/Bq5xR) no-repeat center center #e9a01c;width:70px;height:50px}
.metro-social li:hover .fb{background:url(http://goo.gl/PmrKh) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://goo.gl/rrPYG) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://goo.gl/bAJOi) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://goo.gl/3rxg3) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://goo.gl/uwmHW) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://goo.gl/wVju1) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://goo.gl/Bq5xR) no-repeat center center #e9a01c}
</style>

4. Save template, selesai

Silahkan ubah masing masing profile saya dengan punya sobat. Selamat mencoba,  semoga berguna.