Senin, 07 Juli 2014

Cara Membuat Like Box Facebook Melayang Di Blog

Tentunya sudah tidak asing lagi dengan widget like box kan, yap! widget yang menampilkan Fanspage facebook di blog. Biasanya Widget ini digunakan oleh pemilik blog untuk menambah Like pada Fanspagenya.

Cara Membuat Like Box Facebook Melayang Di Blog

Dan yang akan saya bagikan kali ini adalah like box yang melayang di tengah-tengah blog, like box yang ini juga disertai dengan tombol "Close" jadi tidak memaksa pengunjung untuk meng-like Fanspage kita (visitor-friendly)

Sebelum memasang widget anda sudah pasti harus memiliki Fanspage di facebook, ya kalau belum punya bisa dibuat dulu Cara Membuat Fanspage.

Cara Memasang Like Box Melayang :

1. Login ke blogger.com
2. Pilih menu "Tata Letak"
3. Klik "Tambahkan Gadget" Terserah yang mana aja boleh, soalnya widget ini float (melayang).
4. Pilih "HTML/Javascript".
5. Masukkan kode dibawah ini.
<!-- Script by: http://masterbama.blogspot.com/ -->
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Kreasibocah?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://masterbama.blogspot.com/">Facebook</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://masterbama.blogspot.com/2014/07/cara-membuat-like-box-facebook-melayang-di-blog.html">Get This Widget</a></p>
</div>
<!-- Script by: http://masterbama.blogspot.com/ -->
6. Ganti yang berwarna Merah dengan URL Fanspage Facebook kalian.
7. Klik "Simpan"

Cara Membuat Like Box Facebook Melayang Di Blog

Selamat widget Like Box anda sudah terpasang, jangan lupa untuk mengklik "Like" pada Fanspage saya ya sob! ^_^

Artikel Terkait

Cara Membuat Like Box Facebook Melayang Di Blog
4/ 5
Oleh

24 komentar

7 Juli 2014 21.05 delete

Frame nya bisa di edit-edit kan gan?

Reply
avatar
7 Juli 2014 22.59 delete

kalo cara membuat mouse kursor melayang ada ga gan ?
wkwkwkwk nice tutorial, kapan2 ane praktekin.

Reply
avatar
8 Juli 2014 01.05 delete

Bisa gan kalo membuat mouse kursor jadi melayang.
Caranya:
1. Pada menu Template, klik Edit HTML
2. Tekan CTRL+A > Delete
3. Simpan Template

Dijamin work gan!

Reply
avatar
21 Januari 2015 09.14 delete

terimakaisih banyak sob, sangat membantu sekali, sangat bermanfaat..

Reply
avatar
26 Januari 2015 19.47 delete

Makasih mas infonya,btw ane mau nambahin kata "Bantu Like ya Gan!" Dimana ya ngedit supaya ada kata itu?

Reply
avatar
27 Januari 2015 14.55 delete

Work gan :) thx ,, izin share ya..

Reply
avatar
6 Mei 2015 10.58 delete

sayangnya ini tidak otomatis tersembunyi jika pengunjung sudah like, seharusnya jika ada pengunjung yang kembali dan sudah like, tombolnya gak muncul, biar nyaman para pengunjungnya

Reply
avatar
9 Mei 2015 13.12 delete

thanks buat tutornya gan,, sangat memabantu sekli..

Reply
avatar
15 Mei 2015 21.59 delete

mantap kunjungan nya ditunggu indonesianforce.blogspot.com

Reply
avatar
5 Juni 2015 19.10 delete

Terima Kasih Banyak gan, Saya Cari Cari Di Yang Laen, Nggak WOrk Semua, Tapi Di Master Bama Work, Thank Gan

Kunjungi Balik ; duniagame-mns.blogspot.com

Reply
avatar
23 Agustus 2015 16.43 delete

Terimakasih atas informasinya ya..!! artikelnya sangat bermanfaat sekali.
semoga artikel ini memberikan manfaat untuk orang-orang yang sudah membacanya.
Daftar Facebook

Reply
avatar
28 Februari 2016 05.53 delete Komentar ini telah dihapus oleh pengarang.
avatar
5 Maret 2016 05.24 delete

thanks yah tutornya sangat bermanfaat, liat aja kunjungi website http://khyjuntastrategi.blogspot.co.id

Reply
avatar
6 April 2016 08.45 delete

Bagi seorang guruCara Menghilangkan Bekas Jerawatmemang dibutuhkan sebagai penghasilan tambahan. Bagi anda yang ingin beli mesin baru tentu butuh referensi
Cara Menghilangkan Komedoterlengkap. Jerawat membandel terkadang muncul pada area wajah dan
cara Memutihkan Gigiini cukup sebenarnya cukup mudah bisa dengan ramuan alami. Punya masalah dengan jerawat baca
cara menghilangkan jerawatberikut ya agar cepat sembuh. Bekas jerawat terkadang mengganggu lihat
cara menghilangkan jerawat secara alami yang efektif dan ampuh. Daripada memakai obat kimia mending dengan
penghilang jerawat yang menggunakan bahan herbal. Jerawat yang ngeselin jerawat batu
cara memutihkan kulitlihat disitus kami ya!Jerawat memang menyebalkan sikat segera
pemutih wajah alamidan ampuh dijamin hilang. Ketika memilih terjun ke dunia usaha maka harus juga tahu
pemutih kulit yang cocok untuk dijalankan. Memulai usaha membutuhkan modal walau
pemutih muka alami disini untuk membandingkannya dengan yang lain.

Reply
avatar
28 Juni 2016 14.06 delete

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply
avatar
12 Oktober 2016 20.39 delete

Mas,, di blog saya gak muncul.. tolong di bantu thanks http://modapkbaru.wagomu.id

Reply
avatar

Mohon masukkan saran / kritikan Anda. Atau tanyakan sesuatu yang tidak Anda pahami. Free promosi asal sopan.