Monday, August 6, 2012

Cara Pasang Widget Facebook PopUp Like Box Dengan Timer

Cara Pasang Widget Facebook PopUp Like Box (Timer) - Kali ini saya kembali dengan artikel berkategorikan "Widget" dan yang pastinya bermanfaat bagi sahabat ANVITY Blog | Internet Learning. Widget yang akan saya bahas hari ini adalah widget "FBLikes Pro" yang menurut saya sangat spesial dan menarik. Check it now!

- kembali ke laptop -

FB Like Box ANVITYSalah satu Blogger Professional dan pemilik blog kakiheboh asal Indonesia ini telah menerbitkan widget ciptaannya. Banyak kalangan masyarakat baik dari Indonesia maupun Luar Negeri yang minat dengan widget menarik ini. Yang membuat saya menganggap widget ini spesial adalah teknik tampilan border yang mirip seperti Facebook dan juga fitur timer atau penghitung mundurnya. Kalian juga dapat mengatur berapa lama timer akan berjalan (dalam detik) dan juga dapat mengatur  berapa lama widget ini akan tampil ketika blog di load (dalam menit), baik itu setelah 1 menit atau langsung tampil. Pada widget ini juga dapat mengganti background dengan keempat kode gambar (.js). Loading widget ini juga sangat cepat memungkinkan tidak ada beban apapun pada berat loading blog.

Untuk cara pembuatan dan pemasangannya silahkan ikuti langkah-langkah di bawah ini.
1. Pastikan kalian sudah login ke akun Blogger.
2. Masuk ke halaman "Template" dan klik "Edit HTML"
3. Cari kode </body> (gunkan Ctrl+F untuk mempermudah)
4. Salinlah kode/script dibawah ini dan letakan tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
      KNFBFansPRO='ANVITY Blog'
//]]> </script>
<style>#fblikepop{background-color:#fff; display:none; position:fixed; top:200px;_position:absolute; /* hack for IE 6*/width:470px;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;border-radius: 9px}
#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:28px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:45px;}
#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://anvity-host.googlecode.com/files/anvity-likebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/anvity',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>
5. Save Template. Done!

Edit Kode/Script Widget FB LikeBox

Pemasangan widget belum selesai sampai disini. Ada lagi yang perlu di edit pada kode diatas.
  1. Ganti kata ANVITY Blog dengan kata yang akan tampil di bagian atas widget, misalnya "Join ANVITY Blog on Facebook"
  2. Ganti angka 30 dengan angka yang akan mengatur berapa lama widget itu akan tampil (dalam detik)
  3. Ganti angka 0 dengan angka yang akan mengatur lamanya widget ini akan tampil ketika blog baru di load (dalam menit)
  4. Ganti anvity dengan username FansPage atau jika belum mempuyai username pada FansPage, gunakan ID FansPage (ihat pada address bar browser kamu)
  5. Terakhir, ganti juga true dengan false jika tanda X (close) ingin dihilangkan.

Mengganti Gambar Background Widget FB LikeBox

Sahabat juga dapat mengganti gambar background widget. Silahkan ganti tulisan yang berwarna merah pada kode widget diatas dengan kode-kode gambar dibawah ini.
Facebook Like Box Timer ANVITY
Background ini sudah terpasang di kode widget di atas.
http://anvity-host.googlecode.com/files/anvity-likebox2.js
Facebook Like Box Timer ANVITY
http://anvity-host.googlecode.com/files/anvity-likebox4.js
Facebook Like Box Timer ANVITY
http://anvity-host.googlecode.com/files/anvity-likebox3.js
Facebook Like Box Timer ANVITY
http://anvity-host.googlecode.com/files/anvity-likebox.js
Kurasa sampai disini, jika masih ada masalah dan perlu ditanyakan berikan komentar. Happy Blogging and Enjoy it!

29 comments:

  1. keren widget popupnya jadi ga perlu ditutup langsung nutup sendiri
    nice share sob,
    salam sukses selalu

    ReplyDelete
  2. wahahh berhadir di malam hari tuk cari ilmu disini...

    makasih ya sobat... keren juga nih

    ReplyDelete
  3. This post seem very yummy!!! I love chocolate!
    Technology, Free Software and Best Tutorial
    your blog is good! I'll visit again :)
    God Bless You

    ReplyDelete
  4. This post seem very yummy!!! I love chocolate!
    Technology, Free Software and Best Tutorial
    your blog is good! I'll visit again :)
    God Bless You

    ReplyDelete
  5. langsung sy bookmark buat praktek. thanks sharenya bang.

    ReplyDelete
  6. Wow keren .... langsung bok mark nich .....

    ReplyDelete
  7. kowakoakao....sebenarnya saya kgk suka yang kyk gini...
    cuma itu sebagian dari trick spy banyak yang like

    ReplyDelete
    Replies
    1. justru itu kan blogger berusaha keras supaya FPnya banyak yang like. tanpa berusaha lama jadinya :D

      Delete
  8. waaah mantep gan tips nya succes blogger indo heeheh

    ReplyDelete
  9. mantap bro, nice posting, ijin coba :)

    ReplyDelete
  10. wow informasi bermanfaat sob....

    ReplyDelete
  11. waw.. saya pasang dulu gan.. skalian ini kunjungan balik dari saya :)..

    ReplyDelete
  12. luar biasa trick nyaa,,,, gue coba untuk ngedit, dan al hasil muter"... wkkwkk, tp skrng udah beres< salute boss :D

    ReplyDelete
  13. buat temen2 jangan lupa mampir ya ke blognya aku, thanks

    ReplyDelete
  14. wuih keren om, ini pke timer close sendiri ya?

    ReplyDelete
  15. Thanks infonya....
    kemana2 cari ini baru ketemua...

    ReplyDelete
  16. mantapppp nih widget , izin copas gan...

    ReplyDelete
  17. thanks gan,,,ini sangat menarik,,,join balik ya gun,, www.gunbutuhwaktu.blogspot.com n tukar link nya gan...

    ReplyDelete
  18. klo selain di blogspot gimana caranya gan

    ReplyDelete
  19. kmarin nyari2 kek gnian, ijin simpen dlu deh hahaha...

    ReplyDelete
  20. Nice blog here! Also your website loads up fast! What host are you using?

    Can I get your affiliate link to your host? I wish my website loaded
    up as quickly as yours lol

    ReplyDelete