How To Add Floating Bar on Top of blogger blog

Posted by Lasantha Bandara on May 19th, 2009 File Under : background, widget1 Comment

1.Log in to your dashboard--> layout- ->Page Elements 

2.Click on 'Add a Gadget' on the sidebar. 

3.Select 'HTML/Javascript' and add the code given below and click save.

<style type="text/css">
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;

visibility: hidden;
z-index: 100;

<script type="text/javascript">
* Floating Top Bar script- © Dynamic Drive (
* Sliding routine by Roy Whittle (
* This notice must stay intact for legal use.
* Visit for full source code
*Make it works on blogger by Zen :

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)

function staticbar(){
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")=="")"visible"
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
return el;
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
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");

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="" align="right" border="0" />
<a href="YOUR LINK" onclick="closebar(); return true">YOUR TEXT

Note : Remember to replace YOUR LINK and YOUR TEXT with your details.

File Under : background, widget

One Response to “How To Add Floating Bar on Top of blogger blog”

  1. Social Crunching says:

    Thanks for the post. I just started my blog and was looking for something like this. Thanks, will try it soon!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.