Home » » Cara Membuat Social Profile Widget Metro UI

Cara Membuat Social Profile Widget Metro UI

Written By AiRa LoKa on Rabu, 08 Mei 2013 | 14:38

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

1 komentar:

  1. Respect DMCA and Add credit - original post here - http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger