Memasang Widget Metro Style Social Media Keren Di Blogger - Bangtax
MOHON MATIKAN ADBLOCK ANDA, KARENA BIAYA MAINTENANCE SERTA UPDATE ARTIKEL BERGANTUNG PADA IKLAN YANG MUNCUL PADA BLOG INI | DAN JANGAN LUPA UNTUK FOLLOW SEMUA SOSIAL MEDIA BANGTAX ATAU SILAHKAN PERGI KE KOLOM BERLANGGANAN/SUBSCRIBE DI BAGIAN BAWAH BLOG BANGTAX UNTUK MENDAPATKAN UPDATE ARTIKEL MENARIK LAINNYA.

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.


Sekian artikel saya tentang "Memasang Widget Metro Style Social Media Keren Di Bloggersemoga 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.

Lihat Artikel Lainnya :