Membuat Social Profile Widget Metro UI

bloggpiece - Widget Metro UI, merupakan salah satu widget sosmed (sosial media) keren diantara widget sosmed sejenis lainnya yang bisa anda gunakan untuk mempercantik blog anda.

View Demo

Fitur Social Profile Widget Metro IU ini, Meliputi 7 jejaring social yang paling sering digunakan, Efek hover dan desain yang elegan, dan tidak ada JavaScript, No Jquery, murni dengan CSS. Selain itu dapat diguanakan untuk Blogger maupun Wordpress.

Anda berminat?
Berikut ini cara menambah Social Profile Widget Metro IU:

• Dashboar > Tata Letak > Tambah Gadget > Pilih HTML/JavaScript
• Copy dan paste kode berikut pada kolom konten:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/ID_ANDA rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/ID_ANDA></a></li>
<li><a class="gp" href="https://plus.google.com/ID_ANDA"></a></li>
<li><a class="pi" href=http://pinterest.com/ID_ANDA rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/ID_ANDA rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/ID_ANDA></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/ID_ANDA rel="nofollow"></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{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.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>

• Jangan lupa untuk mengganti ID_ANDA
• Kemudian simpan, dan preview.

Silahkan mencoba pada blog anda dan jangan lupa untuk membagikan postingan ini.