Memasang Widget Tombol Like FansPage Melayang

Chat on Whatsapp

coba baca yang ini

Ada sahabat Kang Wira yang bertanya melalui Whatsapp, Bagaimana Cara Memasang Widget Tombol Like FansPage Melayang di bagian bawah blog, seperti tombol Like FansPage pada blog SEOCIPS.

Tombol like fansPage ini memang sangat berguna untuk menambahkan fans atau followers didalam sebuah fanspage yang sudah kamu miliki dan sangat berguna juga untuk mendapatkan traffic langsung dari Facebook apabila followers kamu sudah cukup tinggi.


Pada artikel sebelumnya saya sudah bahas tutorial Cara Memasang Facebook Messanger kedalam blog, jadi buat teman-teman yang mau mempermudah pengunjung untuk menggunakan fasilitas chat via blog, bisa kamu ikuti tutorial pada artikel sebelumnya.

Bagi teman-teman yang mau melihat contoh demo nya, silahkan tekan tombol dibawah ini.



Nah untuk Memasang Widget Tombol Like FansPage Melayang ini kamu bisa ikuti beberapa langkah mudah dibawah ini.

1. Masuk kedalam Dashboard Blogger teman-teman dan masuk Tema dan pilih Edit HTML.
2. Letakkan kode dibawah ini tepat sebelum kode </head>.

<style type="text/css">
#fbLikeBox{
background-color: #FFFFFF;
border: 4px solid rgb(210,210,210);
bottom: 0;
float: left;
height: auto;
margin-bottom: 10px;
margin-right: 100px;
position: fixed;
padding-bottom: 6px;
right: 0;
width: auto;
z-index: 999;
}
.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>

3. Selanjutnya salin kode Widget Tombol Like FansPage Melayang dibawah ini sebelum kode </body>

<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/blogkangwira' 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%2Fblogkangwira&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>

PERHATIAN
Jangan lupa ganti id fanspage yang saya tandai pada kolom JavaScript diatas terlebih dulu.
4. Setelah itu, simpan template.

Sekian dulu tutorial Memasang Widget Tombol Like FansPage Melayang. Semoga mudah dipahami dan di praktekkan yah teman-teman. Jangan lupa berikan pendapat teman-teman pada kolom komentar dibawah ini.