Menambahkan Widget Pop Up Facebook Like Box Dengan Timer

Dari namanya saja terlihat agak panjang namun caranya tidak sepanjang namanya hehe, ok inilah widget yang yang akan memunculkan kotak suka untuk halaman fans Facebook kamu. Jika beberapa waktu yang lalu saya pernah membagikan kotak suka juga, namun yang ini berbeda dengan versi yang sebelumnya, Pada versi ini memang muncul secara tiba-tiba seperti iklan, namun dengan waktu yang dapat di atur sendiri, jadi setelah waktunya habis, widget kotak suka ini akan menutup dengan sendirinya. Lihat cara menaruhnya di bawah ini :

1. Masuk ke Akun Blogger Kamu.

2. Klik Rancangan --> Edit HTML --> Dan jangan lupa di back up dahulu template kamu.

3. Kamu cari kode </body> kemudian kamu salin kode HTML di bawah ini dan letakkan kode yang sudah di salin tadi.

    <script type='text/javascript'>
    //<![CDATA[
        KNFBFansPRO='MASUKKAN USERNAME FAN PAGE FACEBOOK KAMU ATAU ID FACEBOOK KAMU'

    //]]>
    </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: 'Masukkan URL Fan Page Facebook Kamu disini',
                closeable: true        });
        });
    //]]>
    </script>
    <div id='fbtpdiv'/>

NOTE : 

• Ganti kode yang berwarna biru dengan username atau jika kamu belum punya usernamenya, kamu masukkan ID-nya fan page facebook kamu misalkan ; hzndi atau 303187763075919.
• Ganti kode yang berwarna hijau di time out untuk waktu kemunculannya.
• Ganti kode yang berwarna ungu dengan alamat URL fan page facebook kamu misalkan http://www.facebook.com/pages/Hzndi/303187763075919 atau http://www.facebook.com/hzndi.

4. Simpan template dan lihat hasilnya.


NB : Untuk kode yang berwarna cokelat, bisa kamu ganti dengan gambar-gambar yang kamu suka disini, dengan mengganti URL kode yang berwarna cokelat saja.

(Gambar 1)

alamat URL-nya : http://mybloggertricks.googlecode.com/files/mbtlikebox4.js

(Gambar 2)

Alamat URL-nya : http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

 

(Gambar 3)

Alamat URL-nya : http://mybloggertricks.googlecode.com/files/mbtlikebox.js

Terima kasih untuk mybloggertricks.com untuk kode-nya :). Dan jika ada pertanyaan seputar widget di atas bisa kamu ketikan komentar, pertanyaan, kritik atau saran kamu di kotak komentar di bawah ini.

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget