Buat Floating Bar yuk ...

Guys, pernah denger istilah floating bar ? Ini bukan semacam Bar melayang gitu yak (terjemahan kasarnya). Tapi ini adalah salah satu fitur web programming/designing. Mau tahu lebih jelasnya ? Baca lagi yukz tapi dalam bahasa inggris lumayan lah sekalian latih skill hehe.

A floating bar, as the name says, floats at top or bottom of a blog, you can add any content to it (like a request to subscribe or an invite to any special event running on your blog).The bar looks like this (of course you can customize it if you want)


If you want to add a similar bar to your blog, then follow these instructions:

Log in to Blogger
Go to Layout -> Edit HTML, and find (CTRL+F) this in the code:
</head>

And immediately ABOVE/BEFORE it add these lines:

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
/***********************************************
* 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>

=======================================================================
Modify the code in red, as per your requirements. Now save the template.
And go to Layout -> Page Elements -> Click on "Add a Gadget" and select it as "HTML/JavaScript" type. And then paste this code in to it:

<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" /></a>
Your content here.
</div>

This is IT !!! Floating bar hehe..