Membuat Facebook LikeBox JQuery Popup dengan Timer

Facebook LikeBox JQuery Popup adalah termasuk counter waktu dan bukan likebox ini akan menampilkan sebuah tombol seperti link like Fan Page Anda dan sebuah gambar menarik yang juga link ke halaman fans page Anda, membiarkan pengunjung Anda untuk bergabung baik ke halaman fans page Anda dengan mengklik tombol like atau dengan hanya mengunjungi halaman fans page Anda dengan mengklik gambar.

Anda dapat mengatur untuk berapa lama widget / plugin harus menampilkan sebelum menghilang secara otomatis. Ini juga termasuk pilihan default. Anda juga dapat menentukan apakah Anda ingin widget ini segera ditampilkan segera setelah pengunjung memasuki situs atau setelah waktu yang ditentukan.



1. Login ke Akun blogger sobat.

2. Pada Dasbor klik Template > Edit HTML.

3. Centang Expand Template Widget > Backup Template Anda.

4. Lalu dalam Edit Template Anda cari kode berikut dengan tekan (ctrl=F) :
</body>
5. Bila sobat ketemu sekarang letakkan kode berikut tepat di atas kode tadi.


<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='Poetra 86'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://otowebsite.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://otowebsite.googlecode.com/files/owlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                     
        $().KNFBFansPRO({
           timeout: 20,
            wait: 0,
            url: 'http://www.facebook.com/Poetra86',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

_____________________________________________________________________________________________________________________
  • Ganti Poetra 86 dengan nama fans page facebook Sobat.
  • Timer disetting selama 20 detik untuk mengubah waktunya tinggal edit saja yang warna merah timeout: 20.
  • Widget ini akan segera muncul karna menggunakan waktu tunggu 0 detik, bila Anda ingin mengubah widget ini muncul setelah 1 menit dan sebagainya Anda cukup edit yang warna kuning wait: 0.
  • Ganti http://www.facebook.com/Poetra86 dengan url fans page facebokk Sobat.
_____________________________________________________________________________________________________________________

Mengubah tampilan background image fans page :

Anda dapat mengubah background image tersebut dengan beberapa background image yang sudah saya siapkan berikut, anda cukup mengganti kode http://otowebsite.googlecode.com/files/owlikebox2.js dengan kode backgroud image berikut:


   http://otowebsite.googlecode.com/files/owlikebox.js


  http://otowebsite.googlecode.com/files/owlikebox2.js


  http://otowebsite.googlecode.com/files/owlikebox3.js


  http://otowebsite.googlecode.com/files/owlikebox4.js

7. Simpan template dan lihat hasilnya di blog sobat


0 komentar:

Post a Comment