Cara Membuat Social Profile Widget Metro UI

     Cara Membuat Social Profile Widget Metro UI - Hai semuaAiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Cara Membuat Social Profile Widget Metro UI.

     Hai semua... Jejaring sosial adalah alat untuk menambah jumlah pengunjung blog.  Widget ini cocok untuk blogger yg ingin menaikkan traffik. Widget ini meliputi 7 jejaring social yang paling sering digunakandan di gabung menjadi satu dengan efek hover dan desain yang elegan, dan widget ini sangat colorfull. Yang paling penting widget ini tidak ada JavaScript, No Jquery, murni dengan CSS. Jadi tidak akan memperlambat blog. Nah, bagi yang mau coba, Langsung saja..

Check It Out......

DEMO

1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Gadget > HTML/Javascript.

2.  Pada kolom konten, pastekan script dibawah ini.

<div class="metro-social">
<br />
<br />
<br />
<li><a class="fb" href="https://www.facebook.com/airalokablogspotcom" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/airaloka29"></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href="http://pinterest.com/airaloka" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/airaloka" rel="nofollow"></a></li>
<li><a class="yt" href="http://www.youtube.com/airaloka"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/airaloka" 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>

3.  Ganti url profile saya dengan url profile anda.

4.  Simpan.

Selamat mencoba!