Cara Membuat Popup Like Facebook di Bloger

Cara Membuat Popup Like Facebook di Bloger

Fanspage merupakan salah satu fitur yang disediakan oleh facebook yang dapat digunakan untuk mengumpulkan fans bisnis kita dan berbagi hal-hal baru seperti blog. Tentu hal ini sangat membantu dimana ketika kita mempunyai postingan baru, lalu kita akan share di fanspage kita. Namun mendapatkan Fanspage itu susah-susah gampang, salah satu cara yang cukup efektif yaitu dengan menambahkan Popup pada halaman blog kita.

Namun mungkin bagi beberapa orang belum mengetahui bagaimana membuat Popup fanspage pada halaman blog. Inilah yang membuat forteknik.com akan berbagi tentang cara membuat Popup Fanspage di blog.

Cara Membuat Popup Like Facebook di Bloger:

1. Masuk ke bloger
2. Pilih Tata letak kemudian Tambah widget


3. Pilih "Java Script"



4. Isi judul fanspage atau boleh juga kosong, kemudian isi konten dengan script dibawah:

<!-- Facebook Popup Widget Mulai -->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstKrdQgKCV3YC-9VSPiIIDjq4aWt9jFXTvUyUMdktCbA5HROI-cMCKaCxPy4c_rtmRmPyvmmZrqM2N2r6YgMOecot3yEaTyaMpcnDZ4sTp7P9SI5XxeJDqFKXhHHHDjtlqWcL8RISoiN_/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.forteknik.com">FOR TEKNIK</a></center>
</div>
</div>
<!-- Facebook Popup Widget Selesai -->

5. Setelah itu ubah kode yang dibawah: Cari :  http://www.facebook.com/url-halaman-facebook-anda : Ganti Text berwarna Merah dengan URL Fannspage Atau ID Fabfanspage anda. 

BACA JUGA: Cara Mengetahui ID Facebook

6. Kurang lebih seperti ini Kemudian Simpan

Kostum Jeda waktu:

Cari : delay(10000) dan ganti sesuai keinginan anda 1000= 1 Detik, 10000= 10 Detik, 60000= 60 Detik/ 1 Menit.

Menampilkan popup setiap kali blog dikunjungi:
Pada dasarnya popup ini hanya ditampilkan sekali setiap visitor yang mengunjungi blog anda, jika anda ingin mengganti agar popup ini terus tampil ketika seseorang membuka blog dapat dengan menghapus script dibawah

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

Share this post

Berlangganan update artikel terbaru via email: