Sejauh ini saya telah menerbitkan dua versi popup Jquery Facebook Likebox ( Version1 | Version2 ) dan hari ini saya akan berbagi versi lain dengan pilihan lebih banyak Control.

 Ini 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.

Kode JavaScript untuk plugin ini diciptakan oleh kakiheboh disebut sebagai " LikeBox FB Fanpage Pro "dan saya hanya memodifikasi kode untuk membuat empat latar belakang yang berbeda untuk likebox tersebut. Instalasi sangat mudah cukup ikuti langkah-langkah yang sudah saya siapkan.
Yang satu ini relatif lebih cepat dibandingkan dengan beban blogger widget sebelumnya, Untuk lebih jelasnya lihat priviewnya.




Cara Menginstal Facebook LikeBox JQuery Popup dengan Timer


1. Login ke Akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup Template Anda.

4. Selanjutnya dalam Edit Template Anda cari kode berikut:

</body>

5. Jika kesulitan mencari kode HTML coba klick DISINI.

6. Bila sudah ketemu sekarang letakkan kode berikut tepat di atas kode tadi.

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='Oto Website'
//]]>
</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: 30,
            wait: 0,
            url: 'http://www.facebook.com/dekrif',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

Melakukan Perubahan-perubahan penting:
  • Ganti Oto Website dengan nama fans page facebook Anda.
  • Timer diset selama 30 detik untuk mengubah waktunya tinggal edit saja timeout: 30.
  • 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 wait: 0.
  • Ganti http://www.facebook.com/dekrif dengan url fans page facebokk Anda.

Mengubah tampilan background image fans page.
kode http://otowebsite.googlecode.com/files/owlikebox2.js akan menampilkan background berikut:


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!


Perlu Bantuan ???


Langkah-langkah di atas sudah saya  jelaskan secara rinci dan pasti akan bekerja dengan lancar tanpa masalah apapun. Tambahkan widget tersebut ke blog Anda untuk meningkatkan pengikut Facebook Anda.
Semakin banyak penggemar akan semakin mengarahkan lalu lintas blog Anda dan lebih dari ini jaringan raksasa sosial media dengan lebih dari 800 Juta pengguna terdaftar. Beritahu saya jika Anda membutuhkan bantuan.

Poskan Komentar Blogger Disqus

  1. @rama banten RbYah biasa gan, gak ada yg baik di hdupku, hixhix...

    BalasHapus
  2. achh,,,, masa sich ka rif.. sama hihi

    BalasHapus
  3. makasih sob .. berhasil :)

    salam SHARE4RT

    BalasHapus
  4. mantap dah artikelnya
    http://acemaxs31.com/obat-glaukoma-alami/

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top