Membuat Widget Fans Page Melayang di Blogspot

Selamat Pagi...para pengunjung blog semua, pagi ini sungguh cerah, ditemani secangkir Teh Herbal Ashitaba sebagai penghangat dan pemberi tenaga pada tubuh, juga tak lupa sebatang rokok yang siap mengepul. Saya akan memberikan suatu tutorial yang bisa di bilang sudah banyak yang mengupasnya.

Tapi kali ini saya akan merincikan langkah-langkahnya, agar mudah di fahami dan di aplikasikan.

Tutorial apakah itu ? Bagi sebagian orang ini mungkin sudah bukan sesuatu yang hebat, tapi bagi sebagian yang lainnya yang masih terus mau belajar dan terus mencari, ini tidak salah dicoba. Terutama bagi para blogger muda yang baru berkecimpung didunia blog saya rasa tulisan ini bisa memberi sedikit manfaan.

Pada tutorial kali ini saya akan mengupas soal tentang Membuat Widget Fans Page Melayang di Blogspot. Siapa yang tidak kenal dengan Facebook ? Situs jejaring sosial yang telah dipakai oleh jutaan orang diseluruh dunia. Lantas apa manfaat dari Fans Page ? Yah itu dia bagaimana saya harus menjelaskan disini, sebaiknya nanti kawan-kawan blogger bertanya pada suhu yang serba tahu...Suhu Google. 

Karena disini saya hanya membahas cara menampilkan halaman Fans Page di halaman blog Anda secara melayang, dengan harapan setiap pengunjung blog Anda bisa memberikan apresiasi dengan cara nge-Like blog Anda. 

Ok....Tanpa perlu berlebar panjang kita mulai saja Tutorial nya. Srrrruuuuttttt........(minum teh dulu biar sehat)

• Pertama-tama silahkan Anda LOGIN ke account Blogger Anda.
• Setelah itu Pilih pada Tata Letak/Layout
• Kemudian Pilih Tambah Widget / Add Widget
• Pilih HTML/Java Script
• Lalu Tambahkan kode berikut pada kolom HTML/Java Script

<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">
<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;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/pages/Sasak-Culture-Funs-Club/101142649986137" width="250" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>
</div>
</center>
</div>

• Gati alamat URL yang di beri warna merah dengan alamat URL FansPage Anda
• Pilih Save dan coba Reload halaman blog Anda.

Semoga Bermanfaat

Posted in: jaringan, java script, membuat teks melayang, tutorial, tutorial blogspot, widget blogger