Cara Memasang Widget Sosial Media Metro Di Blogger

Widget Img

Widget ini sangat cocok untuk blog anda yang ingin membuat blog anda menjadi keren dan tentunya enak dilihat dan dipandang oleh visitor blog anda, widget sosial media ini juga sangat bermanfaat agar pengunjung blog anda juga mengetahui sosial media anda.

Diatas adalah gambar metro sosial media yang saya akan berikan tutorialnya, tentunya kalian pasti sangat ingin memasang widget diatas ke blog kalian caranya sih sangat mudah, oke langsung saja.

Cara pasang widget sosial media :

1. Login di blogger.com
2. Pergi ke Tata Letak -> Tambahkan Gadget Baru.
3. Pilih HTML/Java Script, lalu tambahkan kode dibawah.

<div class="metro-social">
<li><a class="fb" href="link facebook kamu"></a></li>
<li><a class="tw" href="link twitter kamu"></a></li>
<li><a class="gp" href="link google+ kamu"></a></li>
<li><a class="fd" href="link feedburner kamu"></a></li>
</div>
<style>
/*widget metro sosial media metro*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.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:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;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 .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>

4. Ganti link facebook kamu dengan url facebook kamu, dan link sosial twitter dan google+ kamu
5. Selesai. Jangan lupa simpan.

semoga bermanfaat