Senin, 30 April 2012

Kotak Like Facebook Melayang Dengan jQuery


By on 20.24

Kotak Like Facebook Melayang Dengan jQuery - Kali ini saya akan membahas bagaimana cara membuat Kotak Like Facebook Melayang Dengan jQuery, maksudnya menampilkan kotak like facebook dengan efek melayang ditambah dengan waktu batas, maksudnya jika waktu tersebut sudah habis maka kotak like facebook yang melayang tadi akan menghilang dengan sendirinya, sebelum membahas bagaimana cara membuatnya silahkan lihat DEMO gambar dibawah ini.


Gimana tertarik untuk membuat widget kaya gambar diatas, jika tertarik silahkan ikuti langkah-langkah di bawah ini :

1. Login ke Blog kamu.
2. Pilih Rancangan.
3. Pilih Edit HTML, jangan lupa Download Template Lengkap Dulu.
4. Cari kode </body>, setelah ketemu latakan kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='BLAZERBLOG'
//]]>
</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:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, 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://mybloggertricks.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://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/BLAZERBLOG',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>
Ganti kode yang berwarna MERAH  denagn USERNAME Facebook anda.
Dan untukk yang berwarna BIRU waktu yan ditampilkan dalam detik jadi 30 sama dengan 30 detik.
Sebelum disimpan Template nya klik dulu PERTINJAUAN apakah berhasil, jika berhasil baru SIMPAN TEMPLATE.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

10 komentar:

  1. gan ko gk bisa, pas di pratinjau ada tulisan ini Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "body" must be terminated by the matching end-tag "".

    Error 500

    Knpa gan?? Visit my blog: http://artikeldanlain2.blogspot.com

    BalasHapus
  2. Coba ulangi lagi gan dan pastikan kode nya tidak tertinggal satu pun dan kamu harus meletakannya di atas kode /body jika tidak berhasil cobat pilih add gadget pilih HTML/Java Script

    BalasHapus
  3. thanks gan... sukses berat.hehehe
    mampir sini ya... :)
    http://xendapcgames.blogspot.com/

    BalasHapus
  4. THANKS GAN
    SUXSES

    MAMPIR KLO SUKA FOLLOW YA GAN
    www.fahmix-paz.com

    BalasHapus
  5. wahh saya coba praktekkan dulu ya mas,thx ud share :)

    BalasHapus
  6. makasih, kunjung balik ya mochammadhafidz.blogspot.com

    BalasHapus
  7. Demonya mana gan???

    http://sharing-infokuliah.blogspot.com/

    BalasHapus