Sebenarnya ada beberapa hal yang harus kita perhatikan sebelum memutuskan untuk memasang widget like box facebook pada blog, kalau like box tersebut memang kita butuhkan sebaiknya kita pasang, namun disarankan tata letak likebox facebook jangan hingga menggangu kenyamanan pengunjung,
Ciri Widget Like box facebook ala struktur instruksi
Like box facebook ala struktur instruksi kebetulan dibuat dengan konsep tidak menggangu kenyamanan pengunjung, aturan main widget untuk like box facebook tersebut yakni sebagai berikut:#1. Likebook facebook akan muncul di sudut kanan bawah secara slide dari bawah keatas, alasanya yakni semoga likebox facebook tersebut tidak menghalangi dan menggangu pandangan pengunjung.
#2. Like book facebook akan muncul 20 detik kemudian setelah halaman blog simpulan di load, ini juga untuk memberi kenyamanan pada para pengunjung, dikala pengunjung mengunjungi blog, pengunjung tidak eksklusif di suguhkan tampilan likebox facebook, 20 detik pertama setelah halaman simpulan di load, pengunjung akan disuguhkan artikel yang mereka temukan, selang 20 detik kotak like box gres 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 alasannya yakni itu kita harus meload library jquery dalam instruksi widget tersebut,
KODE WIDGET
Kode dibawah ini yakni kode widget untuk membuat like box facebook melayang ala struktur instruksi yang muncul di sudut kanan bawah slide ke atas:<style type='text/css'>
/* Message Box */
#box-message {
position:absolute;
bottom:-1000px;
right:10px;
width:300px;
height:auto;
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='#'>×</a>
</div>
CARA MENDAPATKAN KODE LIKE BOX FACEBOOK
Untuk menerima instruksi like box facebook, silahkan anda login terlebih dahulu ke akun facebook anda, kalau 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. Cari Gambar The Like Button, kemudian klik tombol "Learn More", menyerupai gambar dibawah ini:
#3. Pada bilah menu sisi kiri, pilih menu Sharing > Social Plugin > Like Box, akan disajikan tampilan menyerupai gambar dibawah ini:
a. Isi kotak Facebook Page URL (1) dengan url halaman yang akan anda promosikan, caranya:
- Masuk ke halaman anda, pilih menu profile di samping kiri menu beranda, silahkan klik menu tersebut, biasanya nama menunya sesuai dengan nama akun untuk halaman tersebut
- Kopi alamat url pada address kafe browser anda, dan paste di kotak Facebook page URL menyerupai terlihat pada gambar 1 diatas.
c. Color Scheeme, silahkan pilih warna kotak like box yang anda sukai.
d. Biarkan setingan lainnya apa adanya atau silahkan anda atur sendiri
Jika sudah tekan tombol "Get Code" untuk menerima kode like box facebook, anda akan menerima tampilan menyerupai terlihat pada gambar dibawah ini:
Pilih Tab IFrame, menyerupai yang diperlihatkan pada gambar diatas, kemudian copy instruksi yang muncul. Kembali ke instruksi widget, silahkan modifikasi instruksi widget di atas ganti goresan pena warna ungu: -LETAKAN KODE LIKE BOX FACEBOOK ANDA DISINI-- dengan instruksi like box facebook yang sudah anda copy sebelumnya.
CARA MEMASANG LIKE BOX FACEBOOK PADA BLOG
Jika anda sudah melengkapi instruksi widget diatas dengan instruksi like box facebook halaman anda, sekarang kita pasang instruksi 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 instruksi widget yang sudah anda lengkapi dengan instruksi like box facebook pada kotak isian yang tersedia, kemudian pilih simpan.
Sampai tahap diatas seharusnya anda sudah berhasil memasang instruksi widget like box facebook pada blog anda, untuk melihat jadinya silahkan anda masuk ke halaman blog anda, kotak like box facebook akan muncul dalam waktu 20 detik setelah halaman simpulan di load, kotak keluar slide di sudut kanan bawah.
DEMO:
Demo menyerupai terlihat pada halaman blog sturktur instruksi ini.MODIFIKASI ULANG WIDGET KOTAK LIKE BOX FACEBOOK ANDA
Mengatur waktu kemunculanUntuk mengatur waktu muncul silahkan anda ganti angaka 20000 yang berwarna biru dengan waktu yang anda inignkan, 20000 berarti kotak like box tersebut gres akan keluar 20 detik setelah halaman blog tersebut simpulan 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 kiri bawah layar, slide dari bawah ke atas silahkan anda ganti instruksi merah right:10px; menjadi left:10px;
Agar Kotak Muncul di layar sudut Kanan Atas
Untuk membuat kotak like box facebook muncul melayang di sudut kanan atas, slide dari atas ke bawah, silahkan ganti instruksi warna merah yang bertuliskan bottom:-1000px; dengan instruksi top:-1000px; kemudian ganti juga instruksi dengan warna biru bertuliskan bottom:"10px" dengan instruksi top:"15px"
Agar Kotak muncul di layar sudut kiri atas
Untuk membuat kotak like box facebook, melayang dan muncul di sudut kiri atas, slide dari atas ke bawah, silahkan ganti instruksi merah yang bertuliskan right:10px, menjadi instruksi left:10px; kemudian ganti juga instruksi bottom:-1000px menjadi instruksi top:-1000px; kemudian ganti juga instruksi dengan warna biru bertuliskan bottom:"10px" dengan instruksi top:"15px"
Demikian artikel sederhana mengenai Membuat Widget Like Box Facebook melayang ala strukturkode, selamat mencoba dan semoga bermanfaat.
0 Response to "Membuat Widget Like Box Facebook melayang ala strukturkode"