MEMBUAT WIDGET METRO UI PADA BLOG

Widget ini dinamai MetUI oleh designernyaVinay Prajapati.

Fitur

Meliputi 7 jejaring social yang paling sering digunakan
Efek hover dan desain yang elegan,
Sangat rapi dan bersih
Tidak ada JavaScript, No Jquery, murni dengan CSS
CARA MENAMBAHKAN WIDGET INI KE BLOG



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/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=LINK MEDIA SOSIAL ANDA</a></li>
<li><a class="gp" href=LINK MEDIA SOSIAL ANDA"></a></li>
<li><a class="pi" href=LINK MEDIA SOSIAL ANDArel="nofollow"></a></li>
<li><a class="in" href=LINK MEDIA SOSIAL ANDArel="nofollow"></a></li>
<li><a class="yt" href=LINK MEDIASOSIAL ANDA</a></li>
<li><a class="fd" href=LINK MEDIA SOSIAL ANDA 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>





Kustomisasi: Ganti link profil saya dengan link profil milik anda.
Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat