Beranda Tips Blogger

Cara Memasang Like Box Facebook Dipojok Kanan Bawah Blog

Gambar
Anonim
Diperbarui: • 0 • menit membaca
Daftar Isi
Cara Memasang Like Box Facebook Dipojok Kanan Bawah Blog - halo sobat blogger, pada kesempatan pagi hari ini admin akan berbagi tentang Facebook like box yang tampil dibagian kanan bawah, Seperti yang saya pakai di blog ini.
Like Box Facebook

Karna jika menggunakan Pop up Like box sangat mengganggu pengunjung, jika sobat ingin menerapkan itu sangat mudah, Sobat ikuti petunjuk singkat dibawah ini :

*Langkah pertama Login Dulu ke blog kalian.
*Setelah itu Pilih Template
*Lalu pilih Edit HTML
*Setelah masuk ke Edit HTML, lalu sobat cari kode </head>

*Kalau sudah ketemu, Sobat masukan Css dibawah ini tepat diatasnya.

CSS

    • CSS
<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>
*Setelah itu sobat cari kode </body>
Dan masukan Kode like box di bawah ini tepat di atas kode </body> .

HTML

    • HTML
<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/anazpedia.net' 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%2Fanazpedia.net&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>

Catatan : Sobat ganti username " Anazpedia.net" dengan username fanspage sobat.
Jika tombol close tidak tampil , sobat pasang dulu font awesome.

Ya mungkin sekian tutorial Cara memasang Facebook Like Box Dibawah Kanan Blog, Semoga bermanfaat

Posting Komentar