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

See the Pen metro style by Bangtax (@bangtax) on CodePen.

BangTax

Seorang pemuda yang masih mencari jati dirinya di bidang IT dan Seni. Selamat datang di blog sederhana ini.