Cara Membuat Pop Up Like Box Facebook di Blogger

Pada artikel kali ini saya akan memberikan tutorial tentang cara membuat pop up like box facebook fanpage di blogger. Perlu kalian ketahui script pop up adalah script yang paling di benci pengunjung karena sangat menghalangi pengelihatan mereka, oleh karena itu sebaiknya kalian memikirkan para pengunjung blog juga.

Baca juga : Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger

Namun jika kalian ingin meningkatkan like atau pengunjung facebook fanpage kalian, hal ini sangat di rekomendasikan karena visitor dari facebook juga di perlukan. Dengan tampilan yang sudah saya modifikasi sehingga facebook fanpage ini terlihat lebih menarik di lihat mata, dan saya menggunakan tombol close yang jelas agar pengunjung juga tidak kebingungan saat ingin menutup pop up like facebook ini.

Kurang lebih tampilannya seperti ini.

Nah untuk cara memasang pop up like box facebook di blogger, ikuti langkah-langkah dari saya berikut ini.

Baca juga : Cara Membuat Widget Breaking News 2 Style di Blogger

Cara Membuat Pop Up Like Box Facebook di Blogger

1. Langkah pertama masuk ke akun Blogger kalian.
2. Pilih menu Tata Letak, klik tambahkan widget di lokasi mana saja, kemudian pilih HTML/JavaScript.
3. Masukan script di bawah ini di kolom Konten, sementara kolom Judul biarkan saja.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}
#fbox-display {
    border: 5px solid #1194f2;
    width: 339px;
    height: 212px;
    position: absolute;
    top: 30%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 1px;
}
#fbox-button:before {
    content: "x";
    padding: 1px 7px 4px 7px;
    background: #ff4e4e;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    border-radius: 10px;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:0px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/TutorialUmumBlog/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 212px;'></iframe>
</div>
</div>

• Pengaturan :
• Ganti URL https://www.facebook.com/TutorialUmumBlog/ dengan URL halaman facebook kalian.
• Untuk mengubah warna sisi widget, ganti kode #1194f2 dengan kode warna yang kalian inginkan.
4. Setelah selesai mengatur, silahkan klik Simpan.

Catatan : Pop Up Like Box Facebook ini hanya akan tampil 1?? pada setiap pengunjung.

Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah

Demikian tutorial dari saya mengenai cara membuat pop up like box facebook di blogger. Jika ada pertanyaan mengenai cara memasang widget ini atau mengenai widget pop up like box facebook ini, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai widget, dan tutorial Blogger lainnya, silahkan tetap kunjungi blog Tutorial Umum.