Kali ini BLOGGINGPASURUAN ingin sharing cara membuat widget profil sosial networking menarik dengan colored style.
Fiturnya meliputi dibawah ini :
>>> 7 jejaring social yang paling sering digunakan
>>> Efek hover dan desain yang elegan,
>>> Sangat comfortable dan clean
>>> Tidak ada JavaScript, No Jquery, original dengan CSS
Cara memasang script CSS 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.
Untuk para Blogger langkahnya seperti berikut, dibawah ini:
>>>Pada Dasbor>> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
>>> Copy dan paste kode berikut dibawah ini :
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/ID-FB-anda rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/ID-twitter-Anda></a></li>
<li><a class="gp" href="https://plus.google.com/ID-googleplus-Anda"></a></li>
<li><a class="pi" href=http://pinterest.com/ID- pinterest –Anda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/id- linkedin-Anda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/Id-Youtube-Anda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/Id- feedburner-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 ID-diatas dengan ID profil link profil milik anda.
>>> Simpan dan lihat hasilnya diblog anda.
Demikian tutorial dari BLOGGINGPASURUAN cara membuat social profile widget pada blog. Semoga bermanfaat.