Cara Mudah Membuat Widget Icon Media Sosial Super Keren di Blogger

Master Selo - Berjumpa lagi dengan saya dan pada kali ini saya masih akan membahas sebuah artikel yagn berkaitan dengan blogger ya sobat masih dengan topik utama yaitu membahas sebuah widget blogger tapi pada kali ini saya tidak akan membahas widget label lagi di karenakan saya sudah membahasnya di artikel awal sebelum ini dan pada artikel ini saya akan membahas sebuah artikel tentang widget media sosial keren dan unik di blogger.

• Demo

Nahh bagi sobat yang berminat atau ingin memasang widget media sosial keren dan unik di blogger seperti gambar di atas atau juga bisa melihat demonya di bawah ini sobat bisa mengikuti langkah-langkahnya di bawah ini step by step perlahan demi perlahan yang penting pasti dan jadi ya 

  Ikuti langkah di bawah ini :

1. Login ke akun blogger anda masing-masing

2. Jika sudah pilih Menu Template / Edit Template / setelah itu masukkan kode CSS di bawah ini tepat di atas kode : </style>

CSS KODE

/*================= CSS Social Icons Widget by master selo =====================*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:" ";display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

3. Jika sudah simpan template yang baru saya kita edit tadi
4. Setelah itu pilih Menu Tataletak / Add Gadget / Pilih HTML Java Script

5. Lalu copy kode HTML di bawah ini dan pastekan ke dalam HTML Java Script yang baru saja kita buat tadi.

HTML KODE

<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class

 
6. Jika sudah simpan Gadget HTML Java Script yang baru saja kita buat tadi
7. Dan sekarang lihat hasilnya tara widget media sosial ala master selo sudah terpasang dengan sempurna bukan heheheheh sekian dari saya terimakasih semoga bermanfaat buat yang membutuhkan ya.