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
Ganti kode yang sudah di tandai diatas dengan social media kamu seperti Google Plus , Facebook, Twitter, Instagram, Youtube, Pinterest dan Feedburner
HASIL
Seorang pemuda yang masih mencari jati dirinya di bidang IT dan Seni. Selamat datang di blog sederhana ini.
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
Seorang pemuda yang masih mencari jati dirinya di bidang IT dan Seni. Selamat datang di blog sederhana ini.