Selamat datang di KokoDodi.blogspot.com. Kali ini saya akan membagikan Tutorial untuk membuat Like Box Fanspage Melayang di Blog dan Website. Widget Like Box ini akan muncul ketika Blog atau Website kita dibuka oleh pengunjung. Tujuan utama dari Widget ini adalah memperbesar kemungkinan pengunjung untuk melakukan Like pada Fanspage yang kita kelola. Apabila anda ingin membuat Widhet Like Box Fanspage melayang anda dapat membaca tutorial ini lebih lanjut, namum apabila anda lebih menyukai Like Box Fanspage yang sederhana (Seperti yang ada di Sidebar kanan blog ini) anda dapat membacanya tutorialnya diartikel saya yang berudul Tutorial Membuat Widget Fanspage Facebook di Blog Dengan Facebook Developers.
Cara kerja dari Widget Like Box Fanspage Melayang
Widget Like Box Fanspage akan muncul ketika Blog atau Website kita dibuka atau direload. Lama waktu menculnya Widget ini dapat kita atur sesuka hati. Namun saya menyarankan maksimal 30 detik saja. Mengapa? Karena akan membuat pengunjung merasa bosan dan batal untuk membaca blog kita,
Widget ini juga dapat membaca Cookies Browser, sehingga Widget ini tidak akan muncul dua kali apabila pengunjung sudah melakukan Like pada fanspage kita.
 |
| Contoh Tampilan Like Box Fanspage Melayang |
Tutorial Membuat Widget Like Box Fanspage Melayang
Langkah Pertama :
Silakan login ke akun Blogger kalian. Setalah itu bukalah dashboard blog yang ingin anda masukan Syntax Highlighter. Setelah memasuli Dashboard Blog silakan pilih Template lalu Edit HTML.
Langkah Kedua :
Masukan Kode HTML dibawah ini diantara kode <body> dan </body>. Untuk menghindari kesalahan, saya menyarankan untuk meletakkannya tepat dibawah kode <body> saja.
<!-- lostsector.blogspot.com Likebox Pro FBFan Code Start -->
<style>
#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px; _position: absolute; 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; 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>google.load("jquery", "1");</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
kakinetworkdotcom01username="lostsector.stars",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="01",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script src='http://lostsector-project.googlecode.com/files/likebox-facebook-with-timer.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- lostsector.blogspot.com Likebox Pro FBFan Code End -->
Langkah Ketiga :Silakan ubahlah kode lostsector.stars (Baris ke 19) dengan username Fanspage kalian. Setelah itu ubahlah angka 01 (Baris ke 21) dengan kode skin yang kalian inginkan, Kode Skin dapat dilihat dibawah. Lalu Ubahlah angka 15 (Baris ke 22) dengan lama waktu munculnya Like Box ini (Satuan Detik).
 |
| Skin Facebook Kode : 01 |
 |
| Skin Facebook Kode : 02 |
 |
| Skin Facebook Kode : 03 |
 |
| Skin Facebook Kode : 04 |
Simpan Template.
Itulah tutorial dari saya tentang cara membuat Widget Like Box Fanspage Melayang di Blog dan Website. Semoga artikel saya ini dapat membantu dan terima kasih sudah berkunjung di blog saya.
mantab.. terimakasih banyak buat script tutorialnya...
ReplyDeletehttp://bit.do/2SXk
Anda penggemar Produk Local? Yuk cek Kuka.co.id, ada banyak sekali fashion-fashion buatan lokal loh. Jangan sampai anda bingung kalau ingin membeli produk lokal karena Kuka sudah memberikan solusinya.
ReplyDeleteBeli makanan di Kedai Kuka, Enaknya dapat murahnya dapat. Ada yang lain selain Kedai Kuka? No! Kedai Kuka nomor 1 dalam produk pangan lokal Indonesia. Websitenya kedaikuka.co.id! Jangan salah ya!
ReplyDelete