Cara Membuat Widget Facebook Popup Like Box

Widget Facebook Popup Like Box adalah widget yang akan sangat membantu kita untuk mendapatkan Like dari Pengunjung untuk FanPage kita di Facebook. Karena widget ini akan muncul di tengah - tengah Blog dan disertai dengan efek Fokus hanya pada widget ini (Popup) ketika pengunjung membuka Blog kita, sehingga lebih memudahkan dan mendorong pengunjung untuk Like FanPage Blog kita
 Yuk langsung simak tutors-nya :)

1. Login ke Blogger.
2. Langsung saja menuju ke Dashboard >> Tata Letak.
3. Klik Link / Tombol "Tambahkan Gadget".
4. Pilih widget HTML/Javascript.
5. Copy semua Kode di Bawah ini  :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
   <style>
   #fanback {
   display:none;
   background:rgba(0,0,0,0.8);
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
   z-index:99999;
   }
   #fan-exit {
   width:100%;
   height:100%;
   }
   #fanbox {
   background:white;
   width:420px;
   height:270px;
   position:absolute;
   top:58%;
   left:63%;
   margin:-220px 0 0 -375px;
   -webkit-box-shadow: inset 0 0 50px 0 #939393;
   -moz-box-shadow: inset 0 0 50px 0 #939393;
   box-shadow: inset 0 0 50px 0 #939393;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin: -220px 0 0 -375px;
   }
   #fanclose {
   float:right;
   cursor:pointer;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNvr7eG8cOSo99y20KbU21qmZCwcz0S4l5ZyDE_QtxplxiFPADmHH8ynHbB0EyP8LkxzDU8oN6aQkQ6NUUiWzQ9L4VVGFKXcc4DZxcBkFtim9rHTgNlOUSOHCkSLQMQzTrx7aNZ8xPr3fY/s1600/fanclose.png) repeat;
   height:15px;
   padding:20px;
   position:relative;
   padding-right:40px;
   margin-top:-20px;
   margin-right:-22px;
   }
   .remove-borda {
   height:1px;
   width:366px;
   margin:0 auto;
   background:#F3F3F3;
   margin-top:16px;
   position:relative;
   margin-left:20px;
   }
   #linkit a.visited,#linkit a,#linkit a:hover {
   color:#80808B;
   font-size:10px;
   margin: 0 auto 5px auto;
   float:center;
   }
   </style>
   
   
   <script type='text/javascript'>
   //<![CDATA[
   jQuery.cookie = function (key, value, options) {
   
   // key and at least value given, set cookie...
   if (arguments.length > 1 && String(value) !== "[object Object]") {
   options = jQuery.extend({}, options);
   
   if (value === null || value === undefined) {
   options.expires = -1;
   }
   
   if (typeof options.expires === 'number') {
   var days = options.expires, t = options.expires = new Date();
   t.setDate(t.getDate() + days);
   }
   
   value = String(value);
   
   return (document.cookie = [
   encodeURIComponent(key), '=',
   options.raw ? value : encodeURIComponent(value),
   options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
   options.path ? '; path=' + options.path : '',
   options.domain ? '; domain=' + options.domain : '',
   options.secure ? '; secure' : ''
   ].join(''));
   }
   
   // key and possibly options given, get cookie...
   options = value || {};
   var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
   return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
   };
   //]]>
   </script>
   <script type='text/javascript'>
   jQuery(document).ready(function($){
   if($.cookie('popup_user_login') != 'yes'){
   $('#fanback').delay(30000).fadeIn('medium');
   $('#fanclose, #fan-exit').click(function(){
   $('#fanback').stop().fadeOut('medium');
   });
   }
   $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
   });
   </script>
   
   <div id='fanback'>
   <div id='fan-exit'>
   </div>
   <div id='fanbox'>
   <div id='fanclose'>
   </div>
   <div class='remove-borda'>
   </div>
   <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
   
   href=https://www.facebook.com/caraseoblogger&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
   
   style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
   <span id="linkit"><a href="http://www.caraseoblogger.com/2013/11/widget-facebook-popup-like-box-dengan-timer.html" target="_blank">Widget Facebook </a><a href="http://www.caraseoblogger.com/">SEO</a></span></center>
   </div>
   </div>
6. Paste di Widget HTML / JavaScript. Jangan dulu Di Simpan Karena Masih Ada Langkah Kedua...

Langkah Kedua, Merubah beberapa Kode.

1. Ganti https://www.facebook.com/caraseoblogger dengan alamat FanPage kamu.
2. .delay(30000) Ganti Angka 30000 untuk merubah delay widgetnya (delay = detik kapan munculnya widget setelah halaman selesai dimuat). 1 detik = 1000 jadi, 30000 = 30 detik.
3. Untuk merubah Widget agar tidak hanya Muncul Sekali tetapi akan muncul di setiap saat Halaman di Muat. Cari dan Hapus Kode ini :
   

   $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

4. Simpan. dan Selesai.

Sumber: http://www.caraseoblogger.com/2013/11/widget-facebook-popup-like-box-dengan-timer.html#ixzz3QIxSgNpw