Cara Membuat Social Profile Widget Metro UI

Unknown

5 Jun 2013

Belum ada komentar

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......

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!

Jangan lupa kasih +1 ya...