Widget Media Sosial Metro Style

Dah lama saya tak berkongsi perihal widget. Maka, kali ini saya perkenalkan widget media sosial yang agak stylish - Metro Style. Penampilan pautan ke media sosial seperti Facebook, Twitter ... nampak lebih bergaya dengan widget ini. Anda boleh cuba letakkan di dalam blog seperti mana saya meletakkannya di blog ini - Bonus Leaks

Widget Media Sosial Metro Style

Untuk membolehkan widget ini terpasang di blog anda, hanya salin kod HTML di bawah ini, dan letakkan sebagai Add HTML/Javascript di blog anda. Letakkan di bahagian atas sidebar supaya ia nampak kemas dan menonjolkan media sosial yang telah anda ada.

<div class="metro-social">
<li><a class="fb" href="URL FACEBOOK ANDA"></a></li>
<li><a class="tw" href="URL TWITTER ANDA"></a></li>
<li><a class="gp" href="URL GOOGLE+ ANDA"></a></li>
<li><a class="fd" href="URL FEED BLOG ANDA"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.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>
<br />

Jangan lupa gantikan apa yang patut - URL FACEBOOOK ANDA dan pautan lain dalam kod HTML di atas.

Selamat mencuba.

Kredit: BBT