Facebook Like Box Melayang Di Pojok Kanan Blog

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..



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 :)

5 komentar
  1. Replies
    1. Bisa, nanti tampilnya tetep d pojok n melayang.

      Delete
  2. KalKa tidak ada body nya gimana ?

    ReplyDelete
  3. Gan, kalau gak ada tag body gimana ?

    ReplyDelete
    Replies
    1. coba cari.

      &lt;/body&gt;

      atau

      <body/>

      atau

      &lt;!--</body>--&gt;&lt;/body&gt;

      Delete