[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”>
border: 1px solid black;
padding: 2px;
background-color: red;
width: 620px;
visibility: hidden;
z-index: 100;

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

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 &amp;&amp; get_cookie(“remainclosed”)==””)
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)

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.

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.

Subscribe To Our RSS Feeds Click Here

About the Author

This article is written by: Abhi Balani – Finder of ProBlogging. Subscribe to Feeds or Like on Facebook. Contribute to this Web-blog , Write For Us
Abhi Balani Social Links Add on Facebook, Follow on Twitter, Add to your Circles in G+.

Abhishek Balani

A Full Stack Developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner.

I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment.

Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.


  1. Hey Ahbi,

    That's a pretty cool feature. I would loove to have something like that on my self hosted WP blog. Is it possible to put on a WP blog?

    Thanks for sharing.

  2. @ IanBelanger : My friend actually m not so familiar with WP , but i guess the base is same for WB and blogger , so You just have to search for head tag in your WP template code also…. rest the same , try this yourself , if you are unable ,tell me,i 'll surely tell you the full tutorial .

Leave a Reply

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