Cara Membuat Widget Profil Social Media Windows 8 Style | Metro UI V3.0

kali ini saya ingin berbagi Cara Membuat Widget Profil Social Media Windows 8 Style | Metro UI V3.0, sebenarnya widget ini sudah pernah saya share yaitu Cara Membuat Widget Profil Social Media Windows 8 Style | Metro UI V2.0.

namun yang sebelumnya adalah V2.0, kali ini Vinay Prajapati pemilik blog techprevue sekaligus pemilik widget ini telah menghadirkan kembali dalam versi terbarunya V3.0, sama seperti yang sebelumnya widget ini hadir tanpa adanya JQuery dan JavaScript dengan tampilan yang sangat menarik dan ramah, perbedaan widget ini dengan yang sebelumnya adalah adanya penambahan fitur social media yaitu :

• Youtube
• Pinterest
• Linkedin

dan berikut cara pembuatannya :

1. Tata Letak.
2. Tambahkan Gadget, sesuaikan tempat untuk posisi widget ini nantinya.
3. Lalu cari HTML/JavaScript.
4. Masukkan kode dibawah ini.
5. Save.

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/Afrizal.thefallen"></a></li>
<li><a class="tw" href="http://twitter.com/Afrizal_ZT"></a></li>
<li><a class="gp" href="https://plus.google.com/106370769841296920279"></a></li>
<li><a class="pi" href="http://pinterest.com/Afrizal"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/Afrizal"></a></li>
<li><a class="yt" href="http://www.youtube.com/Afrizal"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/bloganz"></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{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.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>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="#" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Keterangan :

• Merah ganti dengan Username Facebook anda.
• Orange ganti dengan Username Twitter anda.
• Hijau ganti dengan ID Google+ anda.
• Kuning ganti dengan Username Pinterest anda.
• Biru ganti dengan URL Profil Linkedin anda.
• Ungu ganti dengan Username Youtube anda.
• Pink ganti dengan URL FeedBurner anda.

DEMO