Cara membuat Facebook Like Box Pada Blog & Memasang Like Box Melayang Di Blog

Posted by


 Suatu hal yang sebenarnya mudah, akan terasa sangat sulit bagi orang yang belum mengetahui dan memahaminya.Berikut ini akan saya uraikan tentang cara memasang Facebook Like Box pada halaman blog untuk tampilan versi web.

Untuk memasang like box pada halaman blog, maka terlebih dulu Anda harus membuka Halaman Pengembang Facebook untuk mendapatkan kodeplugin like box Anda. Dimana langkah-langkahnya adalah sebagai berikut:
  1. Buka halaman pengembang Facebook, dalam hal ini adalah dengan membuka URL https://developers.facebook.com/docs/reference/plugins/like-box/
  2. Masukkan URL Halaman Facebook atau Fans Page yang Anda kelola kemudian tentukan setelan untuk tampilan like box. Dalam hal ini misalnya: mengatur ukuran lebar dan tinggi, warna, maupun elemen yang akan ditampilkan pada like box. Dan untuk lebih jelasnya perhatikan gambar di bawah ini.


  3. Klik tombol ‘Get Code’ untuk mendapatkan kode plugin like box Anda, seperti tampak pada gambar di bawah ini.



Salin kode plugin untuk like box Anda, kemudian masuk ke ‘Dasbor Blogger’, klik menu ‘Tata Letak’ (Layout), dan selanjutnya klik ‘Tambah Gadget’. Dimana untuk gadget yang ditambahkan adalah ‘HTML/JavaScript’. Lalu Klik Save....

Semoga Bermanfaat...

  • Untuk pemasangan agar melayang di blog ikuti lankah-lnkah di bawah ini :




1. Login ke Blogger.com
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +
5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript 

<!-- Script kotak like Facebook Melayang -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">


Letakan Script/code Like Box fans page Anda di sini


</div>

</center></td>
</tr>
</table>
</div>
<!-- akhir -->



6.Simpan dan Lihat Hasilnya

Penting...!!!
Gantilah Letakan Script/code Like Box fans page Anda di sini dengan script Anda sendiri jika belum buat lihat Cara Membuat Account di free-shoutbox.net lalu cara Membuat Shoutbox Di free-shoutbox.net dan langkah terakhir Anda hanya tinggal Memasang Shoutbox di Blogger


Selamat mencoba, semoga berhasil dan terima kasih telah berkunjung.


Blog, Updated at: 16:58

5 Comment :

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    ReplyDelete
  2. Thanks infonya nice !!!
    visit my blog : dengansigit.blogspot.com

    ReplyDelete
  3. You're welcome, thanks juga sudah berkunjung...

    ReplyDelete
  4. Sob yang ini di letak di mana, upload gambarnya lah sob, letakan Script/code Like Box fans page Anda di sini


    ReplyDelete
    Replies
    1. untuk kode script itu ada dibagian atas gambar nomor 3....

      Delete

Ayo Sobat jangan jadi SILENT READER ya, ? bagi dong komentarnya
jika Sobat tidak punya akun silahkan pilih Anonymous...
Dan gunakan kata-kata yang sopan ....

Search This Blog

Popular Posts