Cara Membuat Popup Like Box Facebook di Blog Anda

Posted by Sun3Daily on Tuesday, May 24, 2016 Labels: Blogger, Desain Blog, Tutorial, Widget Blog

Artikel kali ini membahas tentang Cara Membuat Popup Like Box Facebook di Blog Anda . Inilah cara yang paling cocok jika anda ingin meningkatkan facebook like fanspage blog anda, dengan widget popup like box Facebook ini akan membuat setiap pengunjung blog anda dapat lansung melihat like box halaman Facebook anda dan dapat lansung menekan tombol like. Hal tersebut tentu saja dapat meningkatkan like halaman blog anda di Facebook. Bagaimana caranya memasang popup like box Facebook di blog anda?, berikut caranya, silahkan disimak.

Langkah Pertama

Tambahkan kode dibawah ini dimanapun dibagian body pada blog anda atau lewat menambahkan widget untuk menampilkan JavaScript/HTML yang ada pada layanan blog anda.

<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%;
}
#JasperRoberts {
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;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2Tnu-R6l-aWKrsIL24KPlcvrU9nv64gnR_PyYrdRq0xiTsmcvG6LJxug1nR4164ZEV-h0xmaKYy6rr-J424cPy8j5h2PwDzBKppXh0QEfuad5JsQQXeSHMC5N3FdJkAP33KG_vYhC7GL/s1600/TheBlogWidgets.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_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#TheBlogWidgets, #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='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/url-facebook-anda&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 style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by<a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog Widget</a></span>and shared by <a style="color:#a8a8a8;font-size:8px;" href="http://www.tutorkeren.blogspot.blogspot.com">TUTOR KEREN</a></center>
</div>
</div>

Langkah Kedua (Kustomisasi Widget Anda)

Menambahkan URL Halaman Facebook Anda

Temukan kode http://www.facebook.com/url-halaman-facebook-anda, dan ganti dengan URL Halaman Facebook anda.

Mengganti Jeda Waktu 10 Detik

Dasarnya widget Facebook ini hanya muncul selama 10 detik setelah halaman blog anda selesai loading. Untuk merubahnya cari kode delay(10000) dan ganti angka 10000 dengan angka yang lebih besar atau lebih kecil.
1 detik = 1000. 10 detik = 10000. 60 detik = 60000.

Popup Setiap Kali Halaman Blog Anda terbuka/dikunjungi

Dasarnya, widget Facebook ini hanya muncul saat pertama kali blog anda dikunjungi oleh orang(kecuali menghapus cookie browser). Jika anda ingin widget Facebook ini muncul setiap saat blog anda dikunjungi hapus kode dibawah ini.

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Membuat Widget Facebook Popup Hanya Muncul di Beranda Blog Anda

Bukalah editor template anda dan tambahkan kode dibawah ini tepat diatas kode </body>.

<b:if cond='data:page.type == "index"'>Ganti Dengan Kode Widget Popup Facebook Like Box diatas</b:if>

Itulah langkah-langkah menambahkan widget popup like box Facebook di blog anda, jika anda memiliki masalah dalam menambahkan widget ini, silahkan tinggalkan komentar anda Terimakasih.