14

Popup Facebook like box di Blogger

Nah jika artikel sebelumnya cara memasang Facebook Likebox sekarang saya share yang versi Popup. Beruntung saya sebagai admin TrikBlogger.net mempunyai jaringan dengan blogger lain sehingga saya dapat kode facebook popup like box, lalu saya edit kodenya biar SEO friendly. Tunggu apa lagi ? Ayo buka artikel ini
Note : Anda bisa membuka posting saya sebelumnya supaya anda lebih mengerti jalan posting ini

Facebook like box v1
Update :
1. Kode dibuat oleh danlogs
2. Dibuat SEO friendly oleh Alief Reski / Admin TrikBlogger.net .

Biasanya popup facebook like box itu menggunakan lightbox, tetapi yang saya share bukan lightbox jadi bisa lebih cepat
Cara memasangnya gampang
Ingat ! Backup template anda terlebih dahulu
Seperti biasa buka layout / Tata letak > Tambah gadget > HTML / Javascript
<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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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>
<div class="fb-like-box" data-href="http://www.facebook.com/idbloggertrick" data-width="402" data-height="255" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=579594688731789";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
</div>
Save widget nya

Lihat baik-baik kode yang saya beri background kuning, itu adalah jquery, jika di blog anda sudah terpasang maka tidak perlu menyertakan kode itu
Lalu ganti "http://www.facebook.com/idbloggertrick" dengan facebook fan page blog anda.

Konfigurasi Popup Facebook Like Box

Secara default widget muncul 5 detik setelah halaman selesai loading. Cari kode di bawah ini dan ubah angka 5000 ke angka yang lebih besar atau lebih kecil.

$('#fanback').delay(5000).fadeIn('medium');

Catatan: 1 detik = 1000. 10 detik = 10000. 60 detik = 60000. jadi kalau 5 detik=5000

Saat ini cookie akan expire selama 7 hari, jadi setelah 7 hari maka pengunjung yang sama akan melihat popup lagi. Ganti angka 7 sesuai dengan keinginan.

$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); 
Catan : 1 hari=1 , 3 hari=3, 7 hari=7. Pokoknya sesuai angkanya
Dapatkan Facebook Like Box di sini.

Sudah bagus kan ?
Untuk demonya akan muncul secara khusus di posting ini.




Posting Komentar Blogger

  1. mantap gan triknya and thanks infonya

    BalasHapus
  2. supaya pop up nya lengkap, misal ada like fanpage, follow twitter, circles google+, dll. itu kayak gimana kang?

    BalasHapus
    Balasan
    1. pakai gambar tidak ? gambar followernya dipakai tidak ?

      Hapus
  3. hemzz . . .bisa diterapkan niyh . . mumpung belum ada fanspagenya fb di blog q . .
    thanks tutornya ya , ,

    BalasHapus
    Balasan
    1. gan biar setiap buka pagenya muncul pop up gimana?

      Hapus
    2. :>) gan infonya keren,, mampir ni ke rachmanrio.blogspot.com

      Hapus
  4. Thank's gan.. dah ane terapin di Chimikofu
    Sangat bermanfaat :)

    BalasHapus
  5. =)) thanks mastah sudah saya coba di blog saya , dan work ,
    tapi loading lebih lama >.< , monggo blogwalkingnya :) Software Freeware

    BalasHapus
  6. terimakasih tutornya kawan saya suka dan mau di peraktekan
    http://acemaxs31.com/

    BalasHapus
  7. Thanks guys infonya sangat membantu :)
    http://short8.net/12M4U

    BalasHapus
  8. Thanks guys infonya sangat membantu :)
    http://short8.net/12M4U

    BalasHapus
  9. Terimakasih informasinya ^_^
    http://bit.ly/1acxmVh

    BalasHapus

 
Top