Facebook Like Box Melayang Di Pojok Kanan Blog

Tutorial Membuat Widget Facebook Like Box Melayang Di Pojok Kanan Seperti Pada Blog Mas Tamvan

Cara Memasang Widget Like Box Facebook Simple dengan button close, Kali ini mas tamvan akan share widget like / follow fans page facebook muncul terus di pojok bawah kanan blogger..

Bagi kalian yang ingin mempermudah agar pengunjung blog kalian dapat memfollow fans page blog kalian, saya sarankan gunakan widget ini. Widget like fanspage ini simple dan tentunya akan terlihat terus ketika pengunjung tidak mengklos widgetnya..

Sebelumnya saya juga sudah pernah share beberapa widget social media follow counter, facebook like box popup responsive dll, bagi kalian yang ingin mencobanya bisa kunjungi artikel lewat link dibawah ini..

Tutorial Blogger Lainnya :

• Cara Membuat Facebook PopUp Like Box Responsive

• Cara Membuat Widget Pop Up Dengan Waktu Yang Sudah Di Tentukan

• Social Media Follower Counter Otomatis Menampilkan Jumlah Followers For Blogger

Nah untuk tutorial memasang widget facebook like box yang posisinya ada di pojok kanan bawah seperti yang digunakan blog mas tamvan, kalian bisa ikuti tutorial singkat dibawah ini..

• Langkah pertama login terlebih dahulu ke blog kalian

• Setelah login, masuk ke menu Template, Edit HTML

• Setelah masuk ke edit html, kalian cari kode </head>

• Kalo sudah ketemu, masukan CSS dibawah ini tepat diatasnya

<style type="text/css">
#fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:0;float:left;height:auto;margin-bottom:0;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
@-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
</style>

• Selanjutnya, kalian cari kode </body>

• Kalo sudah ketemu, masukan widget like box facebook dibawah ini tepat diatasnya

<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/blogmastamvan' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogmastamvan&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>

Kalian ganti username ini blogmastamvan dengan username Fans Page Facebook kalian..

Kalo Icon Klosnya ga tampil, silahkan pasang font awesome di template blog kalian

• Kalo sudah, tinggal save template

Cukup sekian dan terima kasih, semoga artikel tentang Cara memasang widget facebook like box di pojok kanan bawah ini bermanfaat :)