Membuat Widget Sosial Media Style Windows 8

Widget Sosial Media Style Windows 8

Hai sobat kali ini saya akan memberikan sebuah widget Sosial Media Style Windows 8 dengan tampilan yang sangat menarik dan sangat percis jadi lebih keren. Dan dapat membantu anda apabila ada kendala oleh pengjung blog yang komplin agar bisa berkomunikasi dengan anda langsung.

widget ini dengan pembuatan 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/jamvista"></a></li>
<li><a class="tw" href="http://twitter.com/fauzanrobiyanto"></a></li>
<li><a class="gp" href="https://plus.google.com/116657398624903777053"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/jam-vista"></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://jam-vista.blogspot.com/" 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

LIVE DEMO