Bagaimana sih cara memasang Floating Bar pada sebuah blog? atau anda malah belum tau apa itu floating bar?
Floating bar adalah sebuah objek melayang yang akan mengikuti pergerakan suatu halaman web, jadi kalau halaman webnya kita geser kebwah, maka floating barnya juga ikut bergeser kebawah mengikuti pergerakan halaman. biasanya digunakan untuk memasang sebuah halaman iklan. :)
trus bagaimana cara memasangnya?
yang pertama silahkan masuk ke menu edit HTML blog anda (dalam hal ini saya menggunakan blogspot.com)
selanjutnya masukkan kode di bawah ini sebelum tag </head>
<style type="text/css">
#topbar{
position:absolute;
border: 1px #f2f2f2;
padding: 2px;
background-color: #f2f2f2;
width: 728px;
visibility: hidden;
z-index: 100;
}
</style>
<script>
//<![CDATA[
/***********************************************
* Floating Top Bar script- Ã�© Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
* Code via http://bloggerstop.net
***********************************************/
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>
selanjutnya di bawah tag <body> pastekan kode berikut:
<div id='topbar'>
<a href='' onclick='closebar(); return false'><img align='right' border='0' src='
/close.gif'/></a>
<br/><br/>
(Isi Script Iklan, gambar iklan, dll disini)*
</div>
klik simpan, jika langkah anda benar, maka akan ada perubahan pada halaman blog anda :0 seperti yang ada pada blog saya. :D
