Metro UI Style Social Profile Widget untuk Blogger

Tweet

Metro UI Style Social Profile Widget untuk Blogger - Berikut ini adalah Metro UI Style Social Profile Widget untuk Blogger yang didesain ramping dan terinspirasi dari interface metro style Windows 8. Sebenarnya ini adalah desain dengan konsep yang lebih ramah terhadap perangkat tablet.

Cara buat Metro UI Style Social Profile Widget untuk Blogger:

1. Buka akun Blogger Anda
2. Masuk ke menu tata letak > edit HTML > Javascript/HTML
3. Pastekan kode dibawah ini :

<div class="metro-social">
<li><a class="fb" href="URL Facebook Anda disini"></a></li>
<li><a class="tw" href="URL Twitter Anda disini"></a></li>
<li><a class="gp" href="URL G+ Anda disini"></a></li>
<li><a class="fd" href="URL Feedberner Anda disini"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-gadget-metro-style.html
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>

Keterangan Kode Metro UI Style Social Profile Widget untuk Blogger:

1. Ganti kode yang diwarnai sesuai dengan kebutuhan Anda.

Maka, demikianlah artikel Metro UI Style Social Profile Widget untuk Blogger semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.