BURUAN BERLANGGANAN/SUBSCRIBE BLOG BANGTAX UNTUK MENDAPATKAN UPDATE ARTIKEL MENARIK LAINNYA | JIKA KOLOM KOMENTAR DISQUS TIDAK MUNCUL,SILAHKAN MATIKAN ADBLOCK PADA BROWSER ANDA KEMUDIAN RELOAD KEMBALI | JADILAH BLOGGER YANG SALING MENGHARGAI TANPA MELAKUKAN COPY-PASTE.

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.


Adblock Detected

Suka blog ini ? tetaplah menonaktifkan Adblock jika anda mengunjungi blog ini

Mau lanjut membaca? Ini adalah Cara Whitelisting (daftar putih) Blog ini dari Adblock

Terima Kasih

×