Sudah usang sekali tidak update blog ini, karena banyaknya media yang mesti saya update dan lebih menjadi bab dari skala prioritas tinggi sekarang. Apologize..
Banyak yang menanyakan tentang fitur Widget Facebook Pop Up Like Box yang saya gunakan di saat ini, karena menggunakan cookie untuk menertibkan kemunculannya (dalam hitungan satu atau (x) hari sekali untuk satu pengunjung). Kebanyakan Like Box yang digunakan oleh blog-blog berplatform Blogger menggunakan PopUp dengan timer dan senantiasa muncul. Ini cukup mengganggu, karena semestinya hadirin cuma butuh ditawari sekali dalam sekian waktu, bukan disuguhi setiap buka halaman. Ditambah lagi, fitur timer juga sering mengganggu. Masa mau lihat postingan pendek saja mesti menanti 30 detik agar popup hilang, sedang tidak ada tombol close sama sekali. So very very annoying kan.
Mengapa mesti dalam bentuk popup? Karena popup terbukti mempertinggi tingkat konversi, baik itu like, follow, langganan, bahkan penjualan. Asalkan popup itu gak menganggu, gak setiap kali muncul, tidak menghasilkan hadirin risih, sah banget pake model beginian.
Likebox yang saya gunakan sederhana, namun berbasis berapa kali penampilan per user per hari, dan dilengkapi tombol tutup, tanpa timer. Saya paling benci timer, jadi saya tidak buat yang demikian. Banyak juga bergotong-royong konsep layout popup yang sama, karena konsep layout pop up ini menjadi trend. Tapi saya masih menggunakan Facebook iframe selaku basis Like Box nya karena paling gampang diposisikan, dibanding HTML5 atau XFBML. Tidak ada atribusi link-nya kok pada widget, jadi gak bakal bikin performa popup gak profesional. Yang penting gak copas post orang asal pilih aja tanpa atribusi / sumber. Deal ya.
Berikut snippet scriptnya:
<!-- Facebook Popup Widget Plus Cookie by buka-rahasia.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#bukafpop {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#bukafmetu {width:100%;height:100%;}
#burasbox {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;}
#buras {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBNQyiYHiXeizALjusxZnjRhLL25tCkaZnNwswiHZF6YRFeOmkG0lsp5EPvNGGcyKNbAqX55WnxRI9Sgp-PxQJYDgutQPEx2ihIH_IDausEWPVbcNt8OmjSYiQzM5dVMXjpe9lz3Uj6IQO/s1600/buras-tutup.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}
.burasbord {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 dan nilai (value), pengaturan 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() : '', // atribut expires, IE ga support max-age
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// pengaturan cookie by buka-rahasia.blogspot.com...
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'){
$('#bukafpop').delay(20000).fadeIn('medium');
$('#buras, #bukafmetu').click(function(){
$('#bukafpop').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 30 });
});
</script>
<div id='bukafpop'>
<div id='bukafmetu'>
</div>
<div id='burasbox'>
<div id='buras'>
</div>
<div class='burasbord'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/bukarahasiablogspot&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>
</center>
</div>
</div>
<!-- Facebook Popup Widget Plus Cookie by buka-rahasia.blogspot.com -->
Agar lebih praktis, saya sisipkan semua di widget jadi tidak perlu menyertakan CSS atau javascriptnya di edit HTML Blogger atau edit template footer pada WordPress (no plugin).
Blogger:
1. Buka halaman layout di dasboard. Dashboard > Layout.
2. Tambahkan gadget, ambil yang paling bawah, kalau ada gadget footer itu lebih baik. Jika tidak ada gunakan gadget sidebar paling bawah. Besok-besok kalo mau tambah gadget lagi, pastikan gadget Likebox PopUp ini tetep di bawah ya.
3. Kemudian pilih jenis gadget HTML/Javascript.
4. Copy seluruh isyarat di atas, paste di editor semacam NotePad atau NotePad++. (untuk mengerjakan edit)
5. Masukkan script yang sudah diedit dan save / simpan.
Wordpress:
1. Masuk ke dashboard > appearance / performa > widget.
2. Pilih text widget (teks)
3. Sisipkan ke sidebar paling bawah atau widget footer (jika ada), yang penting pastikan posisinya paling bawah dari semua widget.
4. Copy seluruh isyarat di atas, paste di editor semacam NotePad atau NotePad++. (untuk mengerjakan edit)
5. Masukkan script yang sudah diedit dan save /simpan.
Kostumisasi
Setelah script dicopy dan dimasukkan ke editor teks (notepad, dll), dan sebelum di pasang di blog, laksanakan kostumisasi beberapa bab berikut:
- Warna merah yakni HTML untuk mengundang jquery (yang dihost Google), dalam beberapa kasus, kalau anda sudah memiliki jquery sebelumnya, dapat terjadi crash, sehingga beberapa script justru tidak berfungsi. Jadi, kalau sudah ada, hapus bab jquery ini. Jika setelah dicoba popup enggak jalan, coba di pasang/dikembalikan ke semula. Untuk menyaksikan apakah sudah ada jquery atau belum (kebanyakan template sudah) buka edit HTML di dashboard > template, dan cari dengan keyword jquery. Atau inget-inget aja dahulu pernah pasang gadget/widget yang ada jquery-nya atau tidak. Kalo ga mau ribet di awal, pasang aja semua dahulu untuk nyoba.
- .delay(20000) yakni nilai waktu penundaan likebox timbul di saat halaman diakses oleh hadirin untuk pertama kalinya. Nilai 20000 dalam milidetik, bermakna 20 detik. Saya langsung lebih senang delaynya lebih lambat untuk mastiin halaman dan likebox-nya udah diload dengan bener. Biar hadirin ga cepet-cepet nutup, dan biar lebih terkejut dikit di saat baca artikel. Heuheu. Ubah nilai itu menjadi lebih besar atau kecil untuk lebih memperlambat atau mempercepat kedatangan popup likebox.
- Baris script pada warna hijau yakni statement untuk menyatakan deadline berlakunya cookie yang ditanam di browser pengunjung, value dinyatakan dalam hitungan hari. Perhatikan pada bagian expires: 30, itu bermakna cookie berlaku dalam 30 hari (sebelum kemudian timbul lagi pada hadirin yang sama, setiap 30 hari sekali), ubah nilainya menjadi lebih kecil atau besar. Misalnya 1, kalau ingin popup timbul sekali sehari untuk hadirin dengan browser yang sama. Tapi bila ingin popup likebox timbul setiap kali user membuka halaman blog (apapun) hapus baris berwarna hijau itu.
- https://www.facebook.com/bukarahasiablogspot, ubah ini dengan URL Facebook Page-mu.
Oh ya, anjuran nih, kalau ingin mengerjakan tes, semestinya baris warna hijau dihapus dulu, agar likebox timbul terus. Biar ingat tempatnya semula, kosongin barisnya itu, jangan dihapus, kasi spasi (jarak atas bawah). Kalo sudah fixed timbul dengan baik, kembalikan baris hijau-nya di daerah semua. Atau lebih baik lagi kalo punya blog dan template buat tes, kalo sudah clear beres, gres dipasang diblog utama.
That's it for now, kalau ada problem, silahkan drop komentar di bawah.
Have a nice blogging, then...
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
