Popup Facebook Like Box With Timer

Dongkrak popularitas fanpage facebook dengan memasang widget Popup Facebook Like Box With Timer. Widget ini akan memunculkan kotak suka (like) untuk halaman fans Facebook kamu. Jika beberapa waktu yang lalu saya pernah membagikan kotak suka juga, namun yang ini berbeda dengan widget like box yang sebelumnya, Pada postingan artikel ini like box fanpage facebook akan muncul secara tiba-tiba seperti iklan namun dengan waktu yang dapat di atur sendiri. Widget like box fanpage facebook akan tampil hingga waktu tertentu kemudian setelah waktunya habis, widget like box ini akan menutup dengan sendirinya, seperti contoh yang ada pada gambar di bawah ini.... Gimana ??? keren-kan, oke sob buat yang tertarik langsung aja kita ke TKP.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.
  
  
  Perhatikan kode template sobat, apabila sudah memasang script seperti dibawah ini silakan dilewati saja...
  
  

  <div id='fb-root'></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;js.async=true;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
  </script>

  
  
  Copy-paste kode di bawah ini dan taruh di kotak gadget blog.
  
  

  <!-- Start Moz FB Box Timer -->
  <style>
  #mozfblike{
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  }
  </style>
  
  <div id="mozfblike" style="display:none;z-index:+9999999999999;position:fixed;left:50%;top:50%;width:302px;padding:10px 10px 10px 10px;border-radius:8px;transform: translate(-50%, -50%);">
  <div align="center" style="background-color:#fff;padding:2px;border:1px #000 solid;border-radius:8px;">
  <a href="http://www.facebook.com/monosbit" target="blank" onclick="fbboxstart=1;fbboxtimer();">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMAGU3u8faRyH-Ad8cOGgnVkyY1uUSGt_1RE4nsr1JKZJQ12bdhtkzEKyuFl1IOtRzd-yn5GKFWTzDiidXjePeSPOvnKbeACe9ykuGEJ8J8n35rImL4BfxbWssrhj_bqgndTHrwlorrnI/s800/BecomeFanOnFacebook.jpg" width="100%" height="100%" style="border-radius:8px 8px 0 0;"/>
  </a>
  
  <div class="fb-like" data-href="http://www.facebook.com/monosbit" data-width="300" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
  
  <div align="center" style="font-family:Arial;font-size:12px;">This box will close in <span id="mozfbcounter" style="color:red;">30</span> second
  </div>
  </div>
  </div>
  
  <script>
  var fbboxshow;
  var fbboxstart=30;
  var fbboxshow = setInterval(fbboxtimer, 1000);
  $('#mozfblike').show('slow');
  function fbboxtimer() {
  fbboxstart = fbboxstart -1;
  $("#mozfbcounter").html(fbboxstart)
  if(fbboxstart==0){clearInterval(fbboxshow);$("#mozfblike").hide("slow");}
  }
  </script>
  <!-- End Moz FB Box Timer -->

  
  KETERANGAN :
  • Apabila sobat belum menggunakan kode script JQuery di template blog, silakan sobat pasang kode script JQuery terlebih dahulu karena ada beberapa baris kode yang menggunakan syntax kode jQuery. Biasanya kode script JQuery ini diletakan sebelum kode </HEAD> pada kode template blog. Silakan di cek dahulu kode template blog sobat..
    
    Contoh kode script jQuery :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js' type='text/javascript'></script>
  
  
  • Pada kode di atas yang berwarna merah merupakan URL gambar. Pada postingan artikel ini saya menyediakan beberapa gambar yang menarik, tinggal sobat pilih yang sesuai dengan template blog sobat.
    Contoh :
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMAGU3u8faRyH-Ad8cOGgnVkyY1uUSGt_1RE4nsr1JKZJQ12bdhtkzEKyuFl1IOtRzd-yn5GKFWTzDiidXjePeSPOvnKbeACe9ykuGEJ8J8n35rImL4BfxbWssrhj_bqgndTHrwlorrnI/s800/BecomeFanOnFacebook.jpg" width="100%" height="100%" style="border-radius:8px 8px 0 0;"/>
  
  
  • Pada kode di atas yang berwarna biru merupakan URL fan page facebook silakan diganti dengan url facebook / url blog sobat.
    Contoh :
    <a href="http://www.facebook.com/monosbit" target="blank" onclick="fbboxstart=1;fbboxtimer();">
    
    <div class="fb-like" data-href="http://www.facebook.com/monosbit" data-width="300" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>


• Klik "Save" dan lihat hasilnya...

Pilihan Gambar :

1. 
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMAGU3u8faRyH-Ad8cOGgnVkyY1uUSGt_1RE4nsr1JKZJQ12bdhtkzEKyuFl1IOtRzd-yn5GKFWTzDiidXjePeSPOvnKbeACe9ykuGEJ8J8n35rImL4BfxbWssrhj_bqgndTHrwlorrnI/s800/BecomeFanOnFacebook.jpg
2. 
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisKVYxptvlAA2Ca-Z8CPehuyo0jG_6UhHjrxkC3H9hth7-5kd9pupuuPCDLdgRH8etv76V9GttlS0eP0XA8oYAfEi2Wk_UNISnNKxWIurz6GkueZRhC4Lt0YErUu94yv5fUWovorjOJFzj/s800/facebookbutton.png
3. 
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcDowb0dWkujNUrlUjYpS6hqj878FbG0sspmt5sLPotDn4QguZc0548NDkOi190Qivm4Z9-NehIT4dL-mREhCq0kmg0-3XJrxXd-QFWY3MtA8OrIBG1VHFU2az_or7ecNXPHMl_DUBQ2w/s800/fb.png

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.