Cara memasang pop-up facebook like di blog dengan mudah

.

Cara memasang pop-up facebook like di blog dengan mudah - Umumnya digunakan oleh webmaster dalam mencari follower secara gratis dan bebas dari pengunjung yang datang untuk halaman facebook yang mereka pasang.

Sama halnya dengan postingan saya sebelumnya cara pasang tombol like facebook di blog bagi yang bertujuan mencari follower facebook, namun bedanya dengan cara di atas adalah hasil eksekusi tampilannya, jika cara sebelumnya hanya akan muncul di halaman blog anda dan tetap disitu, yang ini malah tidak muncul di deretan widget yang anda pasang tapi muncul seperti menyembul ke permukaan blog seakan mau keluar (hyperbola). Lihat gambar di atas untuk contoh tampilannya nanti.

Cara seperti ini juga akan sangat mengurangi waktu loading blog anda karena kodenya sangat ringan, berbeda dengan kode yang sebelumnya.

Bagaimana cara memasangnya? sabar dulu apa anda sudah mempunyai fanspage facebook yang hendak anda munculkan pop-up di blog anda nantinya? jika belum anda bisa membuatnya sekarang dengan membaca panduan dari saya berikut cara membuat halaman fanspage facebook dengan mudah.

Sudah selesai membuatnya? kita lanjutkan bagimana cara memasang pop-up facebook like box.

• Masuk ke dasbor blog anda.
• Lalu masuk ke menu tata letak.
• Kemudian klik tambahkan widget, pilih 
• Selanjutnya salin kode berikut ini

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
#fan-exit {
width:100%;
height:100%;
}
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#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;
}
#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;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</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: 5 });
});
</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/sesejukpagi&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>

• Pastekan ke widget HTML/JavaScripts tadi.
• Lalu cari kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 5 }); dan ubah angka expires: 5 sesuai keinginan anda, ini akan memunculkan pop-up dalam berapa hari sekali untuk pengunjung yang sama, disini saya pilih 5 hari.
• Cari  berikut "https://www.facebook.com/sesejukpagi" dan ganti sesuai url halaman anda.
• Lalu tekan save atau simpan.
• Dan lihat hasilnya dengan mengunjungi blog anda.

Sedikit saran.

1. Kode berikut $('#fanback').delay(5000).fadeIn('medium'); berisi waktu jeda berapa lama kotak suka facebook akan muncul setelah loading selesai. cara mengaturnya sebagai berikut 1 detik sama dengan 1000, disini saya mengaturnya 5 detik jadi saya tulis 5000.

Sekarang blog anda sudah ada fitur tersebut, inilah akhir dari Cara memasang pop-up facebook like di blog dengan mudah semoga bermanfaat.

Share this post