Add floating bar on top Posted by vuluganck | at Tuesday, May 12, 2009

Floating bar-Maybe some blogger have heard about this but there was a little error when adding it to source in the previous version.Therefore, can not use it on blogger.

Today I decide to guide you how to make floating bar always on top at the screen even you scroll down.It's feature is you can put the "Subscribe" request or feedback, notice...It just like the floating bar at the bottom that I had published for a long time ago.If you would like to know how to make floating bar at the bottom you can view here.
This kind of floating bar is from dynamicdrive.com so thanks for share.To view demo you can click here


Ok let's do it.

Open your source code and add this code before the ]]></b:skin> tag:


#topbar{
position:absolute;
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 (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
*Make it works on blogger by Zen :http://zenplate.blogspot.com
***********************************************/

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

Ok Save all and create a HTML/Javascript and add this:

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" />
<a href="http://www.site5.com/in.php?id=69188-42" onclick="closebar(); return true">Join Site5-The trusty and best affiliate to make money online with Zen now
</div>

Now you are successful added it to your blog , just save and join but there are some spots that you have to know:Look at the red code, the symbols "&&", that is the reason to make it error on your blog if you add the whole code to your source.The green code is the place you have to option it by your own, you can put Feed,Twitter follow request....up to you.

I hope it will help you much,if you still have any problem please leave a comment below, I will help you soon.
Thanks my friends and don't forget to subscribe and follow me on Twitter to receive the cool daily tips.
Zen

Requirements:Jquery
Developer: Roy Whittle
Website :http://www.dynamicdrive.com/