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

Berikut ini adalah Cara Membuat Widget Social Media Seperti Windows 8 | Metro UI diantaranya facebook,twitter,google+ dan feedburner widget ini di desain oleh Vinay Prajapati pemilik blog techprevue.

widget ini dengan pembuatan desainnya yang sangat menarik seperti pada desain Windows 8 tanpa adanya JQuery dan JavaScript, jika widget ini diletakan pada sidebar blog anda akan terlihat ramah dan cantik dengan fitur utama dari widget ini adalah fungsi hover dan desain yang elegan. 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="fd" href="http://feeds.feedburner.com/Z-TBlog"></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,.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>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://bloganzblog.blogspot.com/2013/07/cara-membuat-widget-social-media-seperti-windows8-metro-ui.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Keterangan :

• Orange ganti dengan ID Facebook anda
• Merah ganti dengan ID Twitter anda
• Hijau ganti dengan ID Google+ anda
• Biru ganti dengan ID FeedBurner anda

DEMO