Cara Menambahkan Pop Up Facebook Fanpage Melayang Keren Blog

Setelah kemarin saya membahas tentang bagaimana caranya meningkatkan pageview dan traffic pada blog baru, kali ini saya akan memberikan tips / trik mudah utnuk menambahkan pop up facebook melayang pada blog.

Untuk mendapatkan traffic dari facebook memang mudah. Salah satunya itu dengan mengajak pengunjung blog menyukai situs yang kita kelola. Nah, dengan bergabungnya mereka dengan blog kita di facebook, secara otomatis jika kita mengeposkan artikel, maka mereka akan melihat artikel kita dan berkemungkinan untuk mengklinya.

Script yang saya gunakan ini tidak mengutak atik template (tidak di letakkan langsung pada template). dan pop up facebook melayang yang akan saya share ini sangatlah SEO-friendly juga ringan.

Langkah-langkahnya :

• Masuk ke blogger
• Masuk layout
• Klik add a gadget / tambah gadget (dimana saja, asal ada tulisan "add a widget" / "tambahkan widget").

• setelah itu akan muncul pop up dan pilihlah HTML / JavaScript. Klik maka akan muncul seperti di bawah ini.

• Masukkan Script Berikut

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan 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(''));
}
// Dapatkan 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_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/zenhuzainiblog&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

• Klik save.

Dan lihat hasilnya.

Keterangan code script :

• Ubah https://www.facebook.com/zenhuzainiblog menjadi nama url facebook page anda.
• untuk memunculkan pop up pada setiap kali halaman di buka, maka hapus kode ini  $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); 
• Untuk mengatur jeda waktu munculnya pop up atur pada kode berikut .delay(3000).

Mungkin hanya ini yangs aya bisa berikan. mudah-mudahan dapat bermanfaat dan pengunjug atau traffic blog anda semakin meningkat.

Baca juga : Cara mudah untuk meningkatkan pengunjung blog dengan cepat.

Share this

Author : zenhuzaini

Related Posts