Selain itu ada juga yang terus menetap di suatu tempat, sticky/menempel, like facebook show hide di samping Blog, dan masih banyak cara unik dan kreatif para blogger lainnya. Namun tidak semua widget like facebook bermanfaat, karena ada juga yang mengganggu pengelihatan pengunjung yang ingin membaca artikel di Blog kita. Pada kali ini saya akan memberikan salah satu cara pemasangan widget Like Facebook yang mungkin sedang Anda cari, yaitu dengan membuat dan memasang widget Popup Like Facebook.
 |
| Popup Facebook di Blog (blogger) |
Cara Membuat Popup Like Facebook di Blog
Jika sobat mendengar nama popup pasti sobat menilai sesuatu yang mengganggu, iya kan? (seperti jendela browser yang muncul tiba-tiba tanpa ijin). Memang widget yang satu ini menurut saya mengganggu pengelihatan pengunjung Blog. Namun sisi baiknya widget like facebook kali ini tidak akan terlalu mengganggu karena widget ini hanya muncul satu kali untuk satu Pengunjung Unik dalam waktu yang telah ditentukan. Bisa 3 hari sekali, 7 hari sekali, 30 hari sekali, dan lain-lain. Jadi selain akan menambah Likers Fans Fage Facebook kita pengunjung tidak akan merasa terganggu dengan popup ini karena hanya muncul beberapa saat saja.Kemudian mengenai tampilanya sendiri, widget ini akan muncul beberapa waktu yang telah ditentukan setalah halaman Blog selesai dimuat. Widget fans page ini akan muncul di bagian tengah muka monitor dan bagian selain widget akan terlihat agak gelap-gelap transparan. Tidak seperti sebagian widget popup Like Facebook yang akan tertutup hanya jika pengunjung melakukan like, bagusnya widget ini yaitu widget ini dilengkapi dengan tombol tutup atau Close. Pengunjung diberi 2 pilihan, apakah akan klik Like lalu melakukan Close Popup atau Close Popup secara langsung. Widget dibuat seperti demikian karena pengunjung bebas menentukan untuk menyukai halaman Facebook kita atau tidak.
Langsung saja mari kita belajar tentang "Cara Membuat Popup Like Facebook di Blog", jika sobat ingin membuat Popup Like Facebook di blog silakan ikuti langkah-langkah berikut ini:
- Pertama-tama Login saja ke akun Blogger Anda.
- Lalu pada bagian "Tata Letak", klik "Tambahkan Gadget" di posisi mana pun.
- Pilih Widget blog HTML/Javascript dan masukan script di bawah ini.
- Jika sudah selesai, klik Simpan / Save.
Script Popup Like Facebook di Blog :
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></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%;
}
#fanbox {
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;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MD4vPHR6a-Sh5ay9UKg1sxnhcigF5ze4sFt5mSvGTlannJBSdZP902ELwBteSKLcHJ-99OuYRE2WKxLjzb2WQ0wrMPy1FEx_9i-xkq5iakz3QCps7ChyphenhyphenRxGgrW0hS1ZOlUDKp47w39Jb/s1600/fanclose.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_facebook_like') != 'yes'){
$('#fanback').delay(5000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'></div>
<div id='fanbox'>
<div id='fanclose'></div>
<div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sakuning.info&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>
</div>
</div>
<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%;
}
#fanbox {
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;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MD4vPHR6a-Sh5ay9UKg1sxnhcigF5ze4sFt5mSvGTlannJBSdZP902ELwBteSKLcHJ-99OuYRE2WKxLjzb2WQ0wrMPy1FEx_9i-xkq5iakz3QCps7ChyphenhyphenRxGgrW0hS1ZOlUDKp47w39Jb/s1600/fanclose.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_facebook_like') != 'yes'){
$('#fanback').delay(5000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'></div>
<div id='fanbox'>
<div id='fanclose'></div>
<div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sakuning.info&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>
</div>
</div>
Hasil "Cara Membuat Popup Like Facebook di Blog" seperti berikut:
Cara Pengeditan "Popup Like Facebook di Blog":
- Ubah https://www.facebook.com/sakuning.info dengan ID Halaman Facebook sobat.
- Jika tidak diubah, widget ini akan muncul 5 detik setelah halaman Blog selesai dimuat. Ubah angka "5000" di dalam kode $('#fanback').delay(5000).fadeIn('medium'); . 1 detik = 1000, 5 detik = 5000, 10 detik=10.000. Saran saya agar sobat menggunakan skala 3000 hingga 7000 saja, biarkan blog meload atribut yang penting-penting, supaya tidak mebyebabkan error dimana-mana.
- Jika tidak diubah, widget ini akan muncul 7 hari sekali untuk satu pengunjung unik. Jika ingin mengubahnya, ubah angka "7" di dalam kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); . 1 hari = 1, 5 hari = 5, 7 hari = 7.
- Banyak kode tampilan yang bisa sobat edit, salah satunya pada kode yang saya beri warna biru. Silakan berkreasi.
#NB : Jika sobat tidak menggunakan blogger / widget blogger, maka untuk memasang widget popup like facebook di blog Anda tinggal taruh saja script tersebut kedalam potongan code Anda. Lokasi paste scriptnya sebelum tag html </body>.
EmoticonEmoticon