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 https://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 thoughts on “Add a Floating Bar (Always On Top) To Your Blog

  1. 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.

    View Comment
  2. 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

    View Comment
  3. 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" ?

    View Comment
  4. 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.

    View Comment

Leave a Reply

Your email address will not be published. Required fields are marked *