Cara membuat Widget Facebook Popup Like Box Blogger

Widget Facebook Popup Like Box adalah widget yang akan sangat membantu kita untuk mendapatkan Like dari Pengunjung untuk FanPage kita di Facebook. Sebagian blogger/visitor berpendapat bahwa Popup Widget Facebook Popup Like Box ini sangat mengganggu namun popup kali ini akan merubah pendapat tersebut karena widget ini hanya akan muncul sekali saja, yaitu ketika pengunjung pertama kali mengunjungi Blog kita. Selanjutnya tidak akan muncul lagi dengan catatan bahwa penggunjung menggunakan komputer/laptop/tablet/hp dan dengan  browser yang sama. Jadi, widget ini tidak akan terus muncul setiap pengunjung sehingga dapat mengganggu kenyamanan pengunjung.

Widget Facebook Popup Like Box Blogger

Bagaimana cara memasang Widget Facebook Popup Like Box? 

Berikut cara pasangnya:

Langkah Pertama, Memasang Widget Facebook Popup Like Box ke Blog.

1. Login ke Blogger.
2. Lanjut 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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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/koodipc&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://koodipc.blogspot.com" target="_blank">Widget Facebook </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/koodipc dengan alamat FanPage kamu.
2. .delay(3000) Ganti Angka 3000 untuk merubah delay widgetnya (delay = detik kapan munculnya widget setelah halaman selesai dimuat). 1 detik = 1000 jadi, 3000 = 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.

Perhatian : Widget Facebook Popup Like Box Blogger ini hanya akan muncul sekali (*), jika Temen - temen blogger ingin melihatnya lagi untuk melihat apakah widget ini sudah bekerja atau belum, bersihkan Cookie Browser terlebih dahulu, dan Reload Halaman Blognya. Maka widget tersebut baru bisa muncul kembali.Selamat berkreasi. 

Catatan : (*), Langkah ke dua poin ke tiga