Cara Membuat Kotak Popup Facebook Like Page di Blogspot
February 15, 2014
MEMASANG Fanspage Facebook Like Box "Popup" alias Kotak Like FB yang muncul atau melayang di halaman blog adalah salah satu tips & trik untuk meningkatkan "Likeer" Fans Page.
>>> Lihat DEMO
Jika Anda berminat memasang Kotak Popup Facebook Like Page di blog Anda, seperti tampak dalam ilustrasi posting ini, dan seperti dalam demo, silakan ikuti langkah sangat mudah di bawah ini.
Cara mudah membuat Kotak Popup Like Box FansPage Facebook di Blogspot berikut ini CB kopas dari Helper Blogger. Disebut "mudah" karena gak usah masuk ke template. Cukup ke "Layout" seperti menambah widget biasa.
Cara Mudah Membuat Kotak Popup Facebook Like Page di Blogspot
1. Layout > Add a Gadget > pilih "Edit HTML/JavaScript"2. Kosongkan judul widget.
3. Copy dan Paste kode berikut ini di kolom "Content".
<!-- FB FANS PAGE LIKE BOX -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
<style>
#hbfanback {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#hbfan-exit {
width: 100%;
height: 100%;
}
#hbfanbox {
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;
}
#hbfanclose {
float: right;
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzSin9CvLp_gFhuYkMGr-s9POiL6-wRfPhC7_k6R5q1c6WSxRGTurCPWUazjy3BU8Mg94YCOj16VDnXeIisaQOBscwTEPT4iNyDoCZ97ZD6LXiqSD8jFbHSBf70OU8yqNqRqCkajuX6M/s1600/hb-fanclose.png) repeat;
height: 15px;
padding: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
margin-right: -22px;
}
.hbremove-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_user_login') != 'yes') {
$('#hbfanback').delay(100).fadeIn('medium');
$('#hbfanclose, #hbfan-exit').click(function() {
$('#hbfanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', {
path: '/',
expires: 7
});
});
</script>
<div id='hbfanback'>
<div id='hbfan-exit'></div>
<div id='hbfanbox'>
<div id='hbfanclose'></div>
<div class='hbremove-borda'></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fcbblogger&width=340&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>
</div>
</div>
<!-- FB FANS PAGE LIKE BOX -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
<style>
#hbfanback {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#hbfan-exit {
width: 100%;
height: 100%;
}
#hbfanbox {
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;
}
#hbfanclose {
float: right;
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzSin9CvLp_gFhuYkMGr-s9POiL6-wRfPhC7_k6R5q1c6WSxRGTurCPWUazjy3BU8Mg94YCOj16VDnXeIisaQOBscwTEPT4iNyDoCZ97ZD6LXiqSD8jFbHSBf70OU8yqNqRqCkajuX6M/s1600/hb-fanclose.png) repeat;
height: 15px;
padding: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
margin-right: -22px;
}
.hbremove-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_user_login') != 'yes') {
$('#hbfanback').delay(100).fadeIn('medium');
$('#hbfanclose, #hbfan-exit').click(function() {
$('#hbfanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', {
path: '/',
expires: 7
});
});
</script>
<div id='hbfanback'>
<div id='hbfan-exit'></div>
<div id='hbfanbox'>
<div id='hbfanclose'></div>
<div class='hbremove-borda'></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fcbblogger&width=340&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>
</div>
</div>
<!-- FB FANS PAGE LIKE BOX -->
4. GANTI tulisan cbblogger dengan username Page Facebook Anda sendiri
5. Save!
PENTING!
- Jika kode script jQuery warna merah paling atas sudah ada di tempalet Anda, HAPUS!
- Jika ingin Kotak Like Fans FB itu muncul setiap kali halaman dibuka, maka hapus kode warna biru (Not Recommended!)
Good Luck!
Jangan lupa klik LIKE/SUKA Fans Page Forum Blogger Indonesia agar kita saling berbagi untuk meningkatkan traffic blog kita. Thanks!
Demikian Cara Membuat Kotak Popup Facebook Like Page di Blogspot. Muah 'kan? (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
thanks gan
ReplyDeletega ada gan nya
ReplyDeleteiya, punya CB sudah dihapus, ganggu soalnya :)
Deleteknapa ga ngefek ya mas ?
ReplyDeletekira kira masalahnya dimana ? . thx infona :)
biasanya karena ada dua kode jquery min js, bentrok dia, hapus kode jquery min js yang ada di bawah kode < / style >
Deletemas biyar saat popupnya muncul terus display belakangnya ke blok hitam transparan fimana ya?
ReplyDeletepilih kode DARK di setingan Facebooknya
Deletemana ada ? capelah tutornya gimana coba
ReplyDeletekalo admin yang sering buka blog sendiri, jadi gak muncul, cba buka dengan browser lain atau clear history / browsing data
Deletekagak ngefek bang udah dihapus codenya.
ReplyDeletelihat jawaban di atas komen Anda
Deletemakasih kawan... berhasil nih (y)
ReplyDeletesaya pakai template dinamis yg ada di bloger
ReplyDeletepop up facebook kok gx bisa ya
live facebook jg gx bisa
thanks gan
ReplyDeleteklau udah muncul terus udah di like, misalnya sama satu orang, nah gimana caranya biar popup facebook ini tidak muncul untuk orang yang udah ngelik itu?
ReplyDeletetips di atas memang begitu, hanya sekali muncul, silakan baca lebih teliti, jangan copas kode doang :)
Deletethank u gan, sudah ane pasang :D
ReplyDeleteMas, saya coba ganti kode fp jd gambar. Cara menghilangkan kotak yang buram yang ada itu g mn ya? Apakah popup nya g bakalan muncul lagi oleh pengunjung dengan ip yang sama, atau ada jedah waktu ketika pengunjung tersebut kembali lagi?
ReplyDeletesekali aja munculnya, yang sudah pernah kunjung tak akan lagi ngeliatnya
DeleteTerima Kasih Gan Masih Work 100000% Hehehe Walaupun Postingan Dari 2014 Tetep Bermanfaat aja :D
ReplyDeleteSyukurlah... semoga likersnya tambah banyak
Deletebisa buat wp min ?
ReplyDeleteWP mah gak ribet main kode, pake aja plugin, banyaaaak....
Delete