Home » » Floating Facebook Like Box di Blog

Floating Facebook Like Box di Blog

Written By AiRa LoKa on Jumat, 17 Mei 2013 | 17:01

Floating Facebook Like Box di Blog
     Floating Facebook Like Box di Blog - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Floating Facebook Like Box di Blog.

     Hai semua... Cara mendatangkan pengunjung blog memang banyak caranya, salah satunya adalah dengan membuat sebuat fanspage di facebook. Floating like box lebih ampuh untuk menggalang fans di fanpage daripada like box yang disediakan oleh facebook, karena wdiget ini bersifat welcome page dan pengunjung akan melihatnya dengan waktu yang lebih lama lama (efek timer). Nah, bagi yang mau pasang, Langsung saja..
Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Gadget > HTML/Javascript.

2.  Pada kolom konten, pastekan script dibawah ini.
<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[
 kakinetworkdotcom01username="AiRaLoKablogspotcom",
  kakinetworkdotcom01title="Join us on Facebook!",
  kakinetworkdotcom01skin="02",
  kakinetworkdotcom01time="60",
  kakinetworkdotcom01wait="0",
  kakinetworkdotcom01lang="en"
 //]]>  </script> <script type="text/javascript" src="https://sites.google.com/site/airalokablogspotcom/download/floating%20fp%20like.js"></script><script type="text/javascript">
   //<![CDATA[
  $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
   //]]>
</script>
3.  Ganti script yang berwarna merah dengan Fans Page / ID facebook akun anda. Biru dengan Kata-kata seruan/sapaan untuk pengunjung yang muncul pada like box. Dan ungu dengan lama waktu tunggu (timer) dari Like Box Facebook(detik).

4.  Simpan

Selamat mecoba!

0 komentar:

Posting Komentar

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN 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>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger