Kali ini saya ingin
mengetengahkan cara membuat widget profil sosial networking menarik dengan
colored style. Widget ini saya namakan Metro UI
Fitur
√ Meliputi 7 jejaring social
yang paling sering digunakan
√ Efek hover dan desain keren,
√ Sangat rapi dan bersih
√ Tidak ada JavaScript, No
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.
Langkahnya sebagai berikut :
√ Pada dasbor >> Masuk menu 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/user-FB anda
rel="nofollow"></a></li>
<li><a
class="tw" href=http://twitter.com/user twitter-anda ></a></li>
<li><a
class="gp" href="https://plus.google.com/1163821xxxxxxxxxxxx"></a></li>
<li><a
class="pi" href=http://pinterest.com/user-ANDA rel="nofollow"></a></li>
<li><a
class="in" href=https://www.linkedin.com/in/user-ANDA rel="nofollow"></a></li>
<li><a
class="yt" href=http://www.youtube.com/ user-ANDA ></a></li>
<li><a
class="fd" href=http://feeds.feedburner.com/ user-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>
Kustomisasi: Ganti link
profil warna
biru dengan link profil milik
anda. Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini,
cara membuat social profile widget pada blog. Semoga bermanfaat.
EmoticonEmoticon