Membuat Kotak Facebook Like Melayang dengan Tombol Close

Sobat blog trik dan tips, sebelumnya saya telah mengajarkan bagaimana untuk membuat efek slide facebook page fan like di blog. Pada kesempatan ini kita akan membuat hal yang sama namun bukan dengan efek slide tetapi menggunakan efek melayang. Kotak facebook page fan like akan muncul dan melayang pada blog di posisi yang tetap. Kotak Facebook Like akan mengikuti ke bawah atau ke atas apabila halaman di scroll. Kotak ini dilengkapi dengan tombol close untuk menonaktifkan gadjet tersebut. Nah penasaran gimana tampilannya pada blog anda ikuti langkah berikut ini:

1. Log in ke Blogger
2. Masuk ke Design --> Elemen Halaman
3. Tambahkan Gadjet
4. Pilih HTML JavaScript
5. Masukan kode berikut ini dalam gadjet tersebut:

<style type="text/css">
#topbar{
position:absolute;
padding-left:-100px;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0KPirQjjPXiUkU-xMtb_kd35wNhcJKDvNfCSf_3G0xQSfwSnbrEOENOSBH4zeiOY24XGq0A8oGafTyVQbGjG1UxrXot39w-dlhWNcyY1m0LKr87hV1_KUjfRD0chVS1Mp-BXqdxEnm2rZ/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">

PASTE KODE FAN PAGE FACEBOOK ANDA DISINI

<span >Widget by: <a style=" font-weight:bold" href="http://blogtrikdantips.blogspot.com/">Indra</a></span>
</div>
</center>
</div>

6. Ganti kode yang berwarna merah dengan kode fan page facebook milik anda
7. Simpan template anda lalu lihat hasilnya

Gimana mudah saja kan untuk membuatnya. Cobalah buat di blog anda, yang pasti fan page ada pada facebook akan semakin bertambah penggemarnya. Selain itu trafik blog anda akan semakin meningkat. Oke sekian dulu trik dan tips kali ini. Selamat mencoba..