Cara membuat pop up halaman Facebook diBlog

Cara membuat pop up halaman Facebook diBlog : Ngblog

Kalau mendengar nama popup pasti sobat menilai sesuatu yang mengganggu, iya kan? Memang widget ini masih mengganggu pengelihatan pengunjung Blog. Namun tidak akan terlalu mengganggu karena widget ini hanya muncul satu kali untuk satu Pengunjung Unik dalam waktu yang telah ditentukan. Bisa 3 hari sekali, 7 hari sekali, 30 hari sekali, dan lain-lain. Jadi selain akan menambah Likers Fans Fage Facebook kita karena terkesan membujuk untuk melakukan Like, dengan Popup Like Facebook ini juga setidaknya pengunjung tidak akan kesal dengan keberadaan popup ini.

Untuk tampilanya sendiri, widget ini akan muncul beberapa waktu yang telah ditentukan setalah halaman Blog selesai dimuat. Widget ini akan muncul di bagian muka monitor dengan bagian selain widget akan terlihat menjadi gelap. Tidak seperti sebagian widget popup Like Facebook yang akan tertutup hanya jika pengunjung melakukan like, widget ini mempunyai kelebihan lain. Yaitu widget ini dilengkapi dengan tombol Close. Pengunjung diberi 2 pilihan, apakah akan klik Like atau Close. Pengunjung bebas menentukan untuk menyukai halaman Facebook kita atau tidak.

Cara Membuatnya...

Pertamanya tentunya kalian harus sudah mempunyai blog di blogger karna tips ini khusus untuk blogger.

Copy Script Berikut :

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></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/AVvXsEgqIWoU5KN-O8HxL6WXqwszVJtfH2lQrEstTvGG6vizSVj0nVeB7e1IoeVJiLQEZw4_MvdD11QTKRfVIvqHCuVyHZ5hXOMMPXUiiEwA35mISVOM1ltTPK2EU8Gneg-weJQx78wwDOsg5RfN/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,#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_facebook_like') != 'yes'){ $('#fanback').delay(5000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_like', '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/belajarpemrogramanoke&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> </div> </div>

Lalu ke blogger - dashbord - tata letak -tambah gadget

Pilih HTML/JAVASCRIPT ,paste script yang diatas

Ubah https://www.facebook.com/belajarpemrogramanoke dengan ID Halaman Facebook sobat
Jika tidak diubah, widget ini akan muncul 5 detik setelah halaman Blog selesai dimuat. Ubah angka "5000" di dalam kode $('#fanback').delay(5000).fadeIn('medium'); . 1 detik = 1000, 5 detik = 5000, 10 detik=10.000.
Jika tidak diubah, widget ini akan muncul 7 hari sekali untuk satu pengunjung unik. Jika ingin mengubahnya, ubah angka "7" di dalam kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); . 1 hari = 1, 5 hari = 5, 7 hari = 7.

Jika telah selesai, klik Simpan.