April 22, 2009

Add a Floating Bar (Always On Top) To Your Blog



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):-
Floating Bar (see the yellow strip floating at the top)

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

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>

Credits: DynamicDrive and JavaScript-FX


25 comments:

Arham said...

thanx dude for accepting my request :D

Dwacon® said...

That's old school... had that, even a semi-transparent one.

Umakant Chaudhari said...

but how to get it floating at the bottom of the blog ?

Umakant Chaudhari said...

NOTE: Instead of the two && in the code, use &*amp;&*amp; (without *'s) i dont know what does that mean :((

Divya Sai said...

Umakant...

just use:

&-a-m-p-;-&-a-m-p-;

without all those hyphen's (that is the same as without those stars)

and NOT
| && |

shown in blue in the code

I have highlighted a line in RED, through which you can shift the bar to BOTTOM.

Divya Sai said...

Umakant, I have just updated the post, now I have added an image of what you have to type instead of && in the code, I hope that makes it clear...

Jon Burrell said...

Is there any way to center this floating bar?

Divya Sai said...

Hello Jon,

In the code above, instead of:

position:absolute;

use this:

position:center;

CrakerLo_Rakero said...

erm hi~ long time no see, well.. do you have any format to make a bar like Facebook Floating Bar?

CrakerLo_Rakero said...

http://facebook-sunnah.blogspot.com/ like tis blog<< i found and at the BOttom that has a bar there, do you know how to make that?

Divya Sai said...

Hi Buddy...welcome back,

If you talking about a floatnig bar similar to that one, then from the same template, here's the code from the bar:

the CSS part:
this is the file:
http://radio.sunnah.indonesia.googlepages.com/dockchat.css
Link it in the same way as is in the template, just above the </head> tag

BUT DO NOT, use the same link, instead download and host it to your own account, and then use it.

And the code to be added in the cody part is this:


<div id='dockbottoms'>
...
...
...
...
...
...
<!-- end wrapper -->


Regards
Sai

CrakerLo_Rakero said...

Okay, thx Sai, but.. What do you mean by "same links"? and I Can't save it that it say "Div" need to placed with ending.. and after that "Div" appears inside the "head"..

or the "Div" should be place inside the "HTML/Javascript" ?

Divya Sai said...

By 'same link', I mean that bolded googlepages link, as that account belongs to 'sunnah' and moreover soon all googlepages accounts will be closed, so it is better to download that .css file and host it to any of your own hotlinking accounts.

And yes the second part of the code from <div id='dockbottoms'> has to be added to a html/javascript widget.

CrakerLo_Rakero said...

Oh and.. Do need to remove those "#"?

CrakerLo_Rakero said...

Oh that you means is, Upload this "dockchat" to my own account.. and also, just paste the link or paste the code? *no need to answer the 2nd question*

Divya Sai said...

Yup...you can upload the file (dockchat.css) to either hotlinkfiles.com or sigmirror.com and then use the direct link to the file in the code above.

CrakerLo_Rakero said...

Thanks Sai!! :D

CrakerLo_Rakero said...

Oh I have one more request,
IS Blogger available to make login or register?

Divya Sai said...

Couldn't get your point...do you mean opening an a/c in blogger ?...as whoever has an account in Google can access blogger

CrakerLo_Rakero said...

Yeah thats what i meant, but i only can put login is making blog private.. and my frends cannot go in even they had login.. oh well.. nevermine.. anyway, thanks for your info, its very useful ^^

CrakerLo_Rakero said...

hi sai, i have one more request, www.crakerloblog.blogspot.com, my blog, i had put the floating bar you gave me, its work greats, and now, How to move the floating bar to middle, cause, if i add things, it will not move to middle but move to left. What i mean is, I Need The Floating Bar to Be a Center If I Add More length, how?

Divya Sai said...

Hi,

Increase the width from 560 to 650 etc. according to the no. of links in it.

Anonymous said...

Its not Working with Firefox

uzer said...

this is really cool!

masterkreatif.com said...

Thanks to sharing

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy