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

2
501
views
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.


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

2 COMMENTS

  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