Membuat Widget Like Box Facebook melayang

   Widget Like box facebook adalah kotak suka untuk halaman facebook milik kita yang bisa kita pasang sebagai widget pada blog, ini adalah prakarsa facebook yang menyajikan kode widget untuk like box facebook tersebut, kode widget like box facebook dibuat sebagai salah satu media yang cukup praktis untuk mempromosikan halaman facebook, agar mendapatkan penggemar yang menyukai halaman facebook tersebut, untuk menambah penggemar terhadap halaman tersebut salah satu cara yang cukup efektif adalah dengan memasang kode widget like box facebook di blog yang kita miliki. dengan demikian halaman facebook kita akan mendapatkan banyak penggemar, apalagi pengunjung blog yang kita miliki sangat banyak, semakin banyak visitor maka peluang untuk mendapatkan klik suka pada halaman facebook melalui like box facebook tersebut akan semakin banyak.

Sebenarnya ada beberapa hal yang harus kita perhatikan sebelum memutuskan untuk memasang widget like box facebook pada blog, jika like box tersebut memang kita butuhkan sebaiknya kita pasang, namun disarankan tata letak likebox facebook jangan sampai menggangu kenyamanan pengunjung,

Ciri Widget Like box facebook ala struktur kode

Like box facebook ala struktur kode kebetulan dibuat dengan konsep tidak menggangu kenyamanan pengunjung, aturan main widget untuk like box facebook tersebut adalah sebagai berikut:

1. Likebook facebook akan muncul di sudut kanan bawah secara slide dari bawah keatas, alasanya adalah agar likebox facebook tersebut tidak menghalangi dan menggangu pandangan pengunjung.

2. Like book facebook akan muncul 20 detik kemudian setelah halaman blog selesai di load, ini juga untuk memberi kenyamanan pada para pengunjung, ketika pengunjung mengunjungi blog, pengunjung tidak langsung di suguhkan tampilan likebox facebook, 20 detik pertama setelah halaman selesai di load, pengunjung akan disuguhkan artikel yang mereka temukan, selang 20 detik kotak like box baru akan muncul secara otomatis di sudut kanan bawah slide ke atas, dengan begitu kotak like box tersebut tidak akan menggangu kenyamanan pengunjung, dan jka menghendaki pengunjung bisa klik tombol suka pada widget likebox tersebut, atau pengunjung juga dapat menutup tampilan kotak likebox tersebut secara langsung.

3. Like book facebook yang dibuat melibatkan framework jquery sebagai pendukungnya, oleh karena itu kita harus meload library jquery dalam kode widget tersebut,

KODE WIDGET

Kode dibawah ini adalah kode widget untuk membuat like box facebook melayang ala struktur kode yang muncul di sudut kanan bawah slide ke atas:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed;
top:500px;
left:10px;
width:50px;
height:60;
padding:10px;
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:1px;
-moz-border-radius:1px;
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;
}
</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({bottom:"10px"}, 20000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
--LETAKAN KODE LIKE BOX FACEBOOK ANDA DISINI--
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

CARA MENDAPATKAN KODE LIKE BOX FACEBOOK

Untuk mendapatkan kode like box facebook, silahkan anda login terlebih dahulu ke akun facebook anda, jika anda belum punya akun facebook silahkan anda daftar buat akun facebook terlebih dahulu, kemudian itkuti langkah-langkah berikut:

1. Masuk ke halaman https://developers.facebook.com/

2. Jangan klik, arahkan kursor ke dokument, , klik menu suka, seperti gambar dibawah ini:

3. Pada bilah menu ini, atur mode tampilan menu di blog, akan disajikan tampilan seperti gambar dibawah ini:

4. Dapatkan Kode seperti gambar dibawah ini, lalu copykan kodenya

CARA MEMASANG LIKE BOX FACEBOOK PADA BLOG

Jika anda sudah melengkapi kode widget diatas dengan kode like box facebook halaman anda, sekarang kita pasang kode tersebut pada blog anda, silahkan ikuti langkah-langkah dibawah ini:


1. Masuk ke akun blogspot Anda

2. Pada bilah menu sisi kiri, silahkan pilih menu Tata Letak.

3. Silahkan klik Tambah Gadget, pilih saja tambahkan gadget untuk area di sidebar

4. Pilih gadet HTML/JavaScript, kemudian kopikan kode widget yang sudah anda lengkapi dengan  kode like box facebook pada kotak isian yang tersedia, kemudian pilih simpan.

Sampai tahap diatas seharusnya anda sudah berhasil memasang kode widget like box facebook pada blog anda, untuk melihat hasilnya silahkan anda masuk ke halaman blog anda, kotak like box facebook akan muncul dalam waktu 20 detik setelah halaman selesai di load, kotak keluar slide di sudut kanan bawah.

DEMO:
Demo seperti terlihat pada halaman blog sturktur kode ini.

MODIFIKASI ULANG WIDGET KOTAK LIKE BOX FACEBOOK ANDA

Mengatur waktu kemunculan
Untuk mengatur waktu muncul silahkan anda ganti angaka 20000 yang berwarna biru dengan waktu yang anda inignkan, 20000 berarti kotak like box tersebut baru akan keluar 20 detik setelah halaman blog tersebut selesai diload, silahkan atur sesuai dengan yang anda kehendaki.

Agar Kotak Like box muncul di sudut kiri bawah
Untuk membuat kotak like box facebox tersebut muncul dari sebelah kanan atas layar, slide dari atas ke bawah silahkan anda ganti kode merah left:10px; menjadi right:10px;

Agar Kotak Muncul di layar sudut Kanan Atas
Untuk membuat kotak like box facebook muncul melayang di sudut kanan bawah, slide dari bawah ke atas, silahkan ganti kode warna merah yang bertuliskan top:500px; dengan kode buttom:500px; kemudian ganti juga kode dengan warna biru bertuliskan bottom:"10px" dengan kode top:"15px"

Demikian artikel sederhana mengenai Membuat Widget Like Box Facebook melayang dari mikhsan share, selamat mencoba dan semoga bermanfaat.