[How To] Add floating Bar at the Top to your Blog or Post [Tutorial]

Hey friends,I have came with a very usefull hack for your Blog or your blog post.You can Add a Floating bar at the top of your Blog with a message or a link,as you can see on my blog right now.Its useful when you have something or important message or link for your readers So the tutorial for How to Add floating Bar at the Top to your Blog or Post goes here

Go to your Blogger DashBoard
Click on Design-> Edit Html
And backup your template first (See Why and How  to backup)

Now Find </head> Tag in your template code
And paste the following code Just above/Before the </head> tag

<style type=”text/css”>
#topbar{
position:absolute;

border: 1px solid black;

padding: 2px;

background-color: red;

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 &amp;&amp;
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 &amp;&amp; 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>

TIP: you can edit the code in green according to you
Now Preview And save Your template.

• If you want to show the Bar in every post then 

go to Page element->Add a gadget-> Html/Java Script and paste the following code (Say Code A).

<div id=”topbar”>
<a href=”” onClick=”closebar(); return false”><img src=”Your ICON URL 16 x 16  ” align=”right” border=”0″ /></a>
Your Message or link  here.
</div>

Thats it .Save it….

• Show Bar in Particular Post.

Copy the CODE A and paste in your Post in EDIT HTML SECTION.

Enjoyed this….tell us via comments.