Cara Membuat Popup Facebook / Like Fan Page Melayang pakai timer

Popup facebook like disertai timer ini dirancang khusus dengan dilengkapi timer untuk menutup sendiri ketika countdown timer-nya sudah habis. Serta dilengkapi dengan script yang dirancang khusus tidak akan muncul lagi ketika salah-satu pengunjung sudah mengklik like pada fans page facebook kita.

Nah untuk memulai membuatnya, maka ikuti langkah-langkah berikut ini:

1.Log in ke blogger.
2.Klik template > Klik edit HTML dan centang kotak Expand Template Widget.
3.Cari kode </body> dan letakkan kode dibawah ini tepat diatasnya:

<!-- antoncabon4u.blogspot.com/ Likebox Pro FBFan Code Start -->
<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: 14px !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://www.google.com/jsapi"></script><script>google.load("jquery",  "1");</script> <script type="text/javascript"  src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  <script type="text/javascript"> //<![CDATA[ 
 antoncabon01username="antoncabon",
  antoncabon01title="Join us at Facebook!",
  antoncabon01skin="04",
  antoncabon01time="15",
  antoncabon01wait="0",
  antoncabon01lang="en"
 //]]>  </script> <script type="text/javascript"  src="http://antoncabonhost.googlecode.com/svn/trunk/connect-fb.js"></script><script  type="text/javascript">
   //<![CDATA[
  $(document).ready(function(){$().antoncabon({ closeable: true });}); 
   //]]>
  </script><!-- antoncabon4u.blogspot.com Likebox Pro FBFan Code End -->

 DEMO
Keterangan :

1. Pada tulisan antoncabon ganti dengan username fans page facebook anda.
2. Like a Fan Facebook silahkan diganti sesuai selera.
3. 15 adalah time yang diperlukan sampai popupya tertutup sendiri.
4. closeable: true berarti anda menyertakan tombol close pada popupnya, jika tidak ingin menampilkannya silahkan ganti dengan false.



Skin 01

5. 01 menandakan kode skinnya anda bisa menggantiya dengan (02, 03, 04) untuk contoh skinnya bisa dilihat gambar dibawah ini :

skin 02

Skin 03

Skin 04

4.Terakhir save template anda dan lihat hasilnya.

SHARE US →

Tweet

2