Animated Information Bar On your Site

This script mimics the interface of the IE ActiveX information bar that slides into view from the top of the browser in displaying information to your visitors in a eye catching way! The bar slides in view and remains static on the screen even when the user scrolls the page. Frequency control lets you limit the display of it to once per session if desired.

Example: 

Look at  the top of the page! Reload page if you didn't catch the "animated" effect.

Directions:

 Simply copy the below into the HEAD section of your page:

   

<style type="text/css">

#informationbar{

position: fixed;

left: 0;

width: 100%;

text-indent: 5px;

padding: 5px 0;

background-color: lightyellow;

border-bottom: 1px solid black;

font: bold 12px Verdana;

}

* html #informationbar{ /*IE6 hack*/

position: absolute;

width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}

</style>

<script type="text/javascript">

/***********************************************

* Animated Information Bar- by CHT (www.cool-hackingtrick.blogspot.com)

* This notice must stay intact for usage

* Visit CHT at http://www.cool-hackingtrick.blogspot.com/ for more stuff and 100s more

***********************************************/

function informationbar(){

this.displayfreq="always"

this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>'

}

informationbar.prototype.setContent=function(data){

this.content=this.content+data

document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')

}

informationbar.prototype.animatetoview=function(){

var barinstance=this

if (parseInt(this.barref.style.top)<0){

this.barref.style.top=parseInt(this.barref.style.top)+5+"px"

setTimeout(function(){barinstance.animatetoview()}, 50)

}

else{

if (document.all && !window.XMLHttpRequest)

this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')

else

this.barref.style.top=0

}

}

informationbar.close=function(){

document.getElementById("informationbar").style.display="none"

if (this.displayfreq=="session")

document.cookie="infobarshown=1;path=/"

}

informationbar.prototype.setfrequency=function(type){

this.displayfreq=type

}

informationbar.prototype.initialize=function(){

if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){

this.barref=document.getElementById("informationbar")

this.barheight=parseInt(this.barref.offsetHeight)

this.barref.style.top=this.barheight*(-1)+"px"

this.animatetoview()

}

}

window.onunload=function(){

this.barref=null

}

</script>

<script type="text/javascript">

<!--Invocation code-->

var infobar=new informationbar()

infobar.setContent('Welcome to CHT! It appears you are not registered yet on our site. Why wait? <a href="YOUR WEBSITE URL HERE">Register here</a>')

//infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!

infobar.initialize()

</script>

         

• The Text With RED Colour,Here you can Write words own.
• The Text "YOUR WEBSITE URL HERE'' Here you Have to write your Own WEBSITE URL. 

 Now,Copy Code and,

• Go to Blogger >Layout
• Choose Add a Gadget or Add a Page Element
• select HTML/Javascript widget

• Paste the code which you have copied.

     Done. :)

If any Problem,Email us:
Email ID
Take good care of your selves and of your dearest ones. Enjoy! :>

 Thankyou.

Kindly Bookmark this Post using your favorite Bookmarking service: