Kali ini saya akan membuat blog kalian semakin kece dengan beberapa widget social profile,gunanya apa ? mungkin sebagai pengenalan diri kalian juga hahah.
Social profile sebenarnya cukup banyak yang memakai bagi yang ingin eksis,namun bagi blogger yang mengincar ads mungkin tidak di pakai.
Cara memasang widget keren ini bagaimana sih ? gampang kok gk perlu ngulek ngulek kode HTML cukup ke Tata Letak.
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/facebook kamu rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/twitter kamu></a></li>
<li><a class="gp" href="https://plus.google.com/googlepluskamu"></a></li>
<li><a class="pi" href=http://pinterest.com/pintkamu rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/linkedinkamu rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/akun youtube kamu></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/feedkamu 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>
Pertama :
Masuk ke Blogger > Tata Letak > Tambahkan Gadget > Pilih HTML/Javascript > Copy Paste kan kode script widget tadi,terserah mau di letak bagian gadget mana.
NB:Ganti tulisan warna merah pada script dengan link Social Profile kamu ya.
EmoticonEmoticon