Cara Membuat Widget Social Media Profile Keren di Blogger

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.