Cara Menambahkan Widget Profil Sosial Media

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Apa kabar sobat bloger semuanya. saat ini kita masih dalam bulan suci ramadhan. semoga waktu yang tersisa dari bulan suci ini semakin baiksegala amal kita .Amin.  Bahasan kita mengenai cara menambahkat widget Social media. sperti profil Facebook,twitter,google plus, yahoomail dan yang lainya. semuanya akan dirangkai dalam satu widget. tentu sangat menarik. Adapun untuk memasangnya kita tidak perlu edit Html. cukup masuk ke akun blog, rangcangan-->>tata letak-->add gadget,dan pilih Html javaScript. silahkan copy kode script nya dibawah ini dan paste pada kolom konten lalu klik simpan.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/xxxxxxxrel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/xxxxxxx></a></li>
<li><a class="gp" href="https://plus.google.com/xxxxxxxxxx"></a></li>
<li><a class="yt" href=http://www.youtube.com/xxxxxxxxxxx></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/xxxxxxxxx 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>

Silahkan ganti huruf x yang berwarna merah dengan profil sosial media punya kamu.

BACA JUGA :