Memasang Widget Sosial Media Responsive

Kali ini saya ingin membahas tentang cara memasang widget sosial media responsive pada template blog. Widget ini bertujuan untuk pengunjung yang tertarik dengan blog kamu akan melihat halaman sosial media yang kamu miliki, sehingga pengunjung tersebut akan mengetahui update artikel yang ada di blog kamu dan berkunjung kembali ke blog yang kamu miliki.

Memasang Widget Sosial Media Responsive

Sebelumnya blog kalian harus mempunyai font awesome, bagi yang belum ada silahkan copy kode berikut dan letakkan di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>

1. Login ke blogger > Edit HTML > Copy kode dibawah ini dan letakkan diatas kode </b:skin>

/* Social Media */
#flatsocial{overflow:hidden;margin:0 0 10px 0}
#flatsocial h2{margin:0 auto 10px auto}
#flatsocial .mi-flatsoc{margin-left:-.5%;margin-right:-.5%}
#flatsocial .mi-flatsoc .mi-social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#flatsocial .mi-flatsoc .mi-social.facebook{background:#3e64ad}#flatsocial .mi-flatsoc .mi-social.twitter{background:#58ccff}#flatsocial .mi-flatsoc .mi-social.blogger{background:#f79738}#flatsocial .mi-flatsoc .mi-social.instagram{background:#4d749f}#flatsocial .mi-flatsoc .mi-social.google{background:#dd4b39}#flatsocial .mi-flatsoc .mi-social.youtube{background:#e62119}
#flatsocial .mi-flatsoc .mi-social.facebook:hover{background:#2d4980}#flatsocial .mi-flatsoc .mi-social.twitter:hover{background:#4aaeda}#flatsocial .mi-flatsoc .mi-social.blogger:hover{background:#d78432}#flatsocial .mi-flatsoc .mi-social.instagram:hover{background:#3c5d81}#flatsocial .mi-flatsoc .mi-social.google:hover{background:#bf3c2c}#flatsocial .mi-flatsoc .mi-social.youtube:hover{background:#c71f18}
#flatsocial .mi-flatsoc .mi-social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#flatsocial .mi-flatsoc .mi-social span{display:block}
#flatsocial .mi-flatsoc .mi-social span.app_icon i{font-size:24px;margin-bottom:5px}
#flatsocial .mi-flatsoc .mi-social span.app_type{font-size:13px;margin:5px auto 0 auto}
#flatsocial h2{background:#1abc9c}

2. Selanjutnya, masuk ke Tata letak > Add Gadget, tambahkan kode dibawah ini.

<div id='flatsocial'>
<div class='mi-flatsoc'>
<div class='mi-social facebook'>
<a href='url halaman facebook' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'/></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='mi-social instagram'>
<a href='url halaman instagram' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'/></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='mi-social twitter'>
<a href='url halaman twitter' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'/></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='mi-social youtube'>
<a href='url halaman youtube' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'/></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
<div class='mi-social google'>
<a href='url halaman google' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'/></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='mi-social blogger'>
<a href='url halaman blogger' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'/></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
</div>
</div>

Ganti kalimat yang saya blok dengan url halaman sosial media blog anda

(Baca : Memasang Flat Color Picker di Halaman Statis Blogger)

3. Simpan dan lihat hasilnya.

Semoga artikel saya tentang Memasang Widget Sosial Media Responsive bisa berguna untuk kamu semua. Terima Kasih!

Berlangganan update artikel terbaru via email: