Home » Tips Trick » Membuat Social Profile Widget Keren : Metro UI

Membuat Social Profile Widget Keren : Metro UI

- on 9:51 PM - No comments
Yukkk pos lagi,,,,langsung aja ke TKP yaaa !!!

Fitur
- Meliputi 7 jejaring sosial yang sering digunakan
-Efek hover dan desain yang elegan
-Sangat rapi dan bersih
-Tidak ada script, Jquery,murni dengan CSS

CARA MENAMBAHKAN WIDGET INI KE BLOG

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

-Pada blogger >> masuk pada menu Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script
-Copy dan paste code di bawah ini pada kolom konten

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/Ganti Disini rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/Ganti Disini></a></li>
<li><a class="gp" href="https://plus.google.com/Ganti Disini"></a></li>
<li><a class="pi" href=http://pinterest.com/Ganti Disni rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/Ganti Disini rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/Ganti Disini></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/Ganti Disini 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>
Kustomisasi: Ganti link profil saya dengan link profil milik anda.
-Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.

KEEP SMILE :)