Memasang Widget Metro Style Social Media Keren Di Blogger
Bangtax.net - Widget Metro Style Social Media adalah sebuah widget yang juga banyak dipakai para blogger-blogger di dunia. Kegunaan dari widget ini sendiri yaitu sebagai salah satu fitur pelengkap untuk mendemonstrasikan social media kita seperti facebook, youtube, instagram, twitter google plus sampai feedburner.
Stylenya yang keren pun merupakan salah satu ketertarikan tersendiri bagi para blogger, tidak hanya itu, ditambah dengan transisi hover yang membuat widget ini makin tambah keren.
Baca Juga: Cara Memasang Widget Mashable Social Media Blogger
Cara Memasang Widget Metro Style Social Media
 |
| Setelah login Blogger dan sampai di Dasbor Blogger silahkan pilih tab "Tata Letak" kemudian pilih "Tambahkan Gadget". |
 |
| Kemudian pilih "HTML/JavaScript" |
 |
| Setelah itu masukkan kode dibawah ini di kotak konten "HTML/JavaScript" lalu klik Simpan |
<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/BangTaxID"></a></li>
<li><a class="tw" href="https://twitter.com/BangTaxID"></a></li>
<li><a class="gp" href="https://plus.google.com/+BangTax"></a></li>
<li><a class="pi" href="https://id.pinterest.com/bangtaxid/"></a></li>
<li><a class="in" href="https://www.instagram.com/bangtax"></a></li>
<li><a class="yt" href="https://www.youtube.com/bangtax"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/bangtaxblog"></a></li>
</div>
<div style="text-align: center;">
<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 #4E4E4E;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #4E4E4E;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #4E4E4E}
.metro-social .pi{background:url(//goo.gl/dvgUz4) no-repeat center center #4E4E4E;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/3QdDFB) no-repeat center center #4E4E4E;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/56pVY9) no-repeat center center #4E4E4E;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #4E4E4E;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/bjuaEI) no-repeat center center #b73b8c}
.metro-social li:hover .yt{background:url(//goo.gl/k8kdb2) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style></div> Ganti kode yang sudah di tandai diatas dengan social media kamu seperti Google Plus , Facebook, Twitter, Instagram, Youtube, Pinterest dan Feedburner
HASIL
Sekian artikel saya tentang "Memasang Widget Metro Style Social Media Keren Di Blogger" semoga bisa berguna untuk kalian semua. Untuk mendapat update artikel menarik dari Bangtax, silahkan masukkan email kalian di kotak subscribe bagian paling bawah blog lalu tekan Subscribe atau juga bisa Follow Sosial Media Bangtax di Instagram, Facebook dan Twitter, Terima kasih.
