This fixed at top bar is the demand of new Era so i am just here to share it with you so that you can add your most important news or anything which you want to show your visitor at first sight when he comes on your blog.So here is that bar which will remain fixed at top either visitor scroll the page or not. But there is another problem that some buddies did not want to see this so now it is difficult to make both of them happy. But this problem is also solved because here is the extra code of closing option means that it your visitor did not want to see this they have full control to close it with just a click. It is also quick to load and easy to install so that it will not make your blog loading time so high because it has not a single image. The widget is compatible with all browsers.
A sticky bar can be now used widely by all blogs and sites for notifying visitors of important updates, offers, coupons and latest news. You can even add your RSS link there and ask you visitors to subscribe to your blog. But there is an awesome thing to display here that is full of benefits for your low connection speed user.(See The End Of Post For Further Info). First see the demo in the screen shoot or top f this blog. Lets get to work!
Features:
1.) It Will Fixed On Top Either You Scroll The Page Or Not.
2.) It Also Has A Close Button So That Is Visitor Did Not Want To See, They Have Control To Close It.
3.) Easy To Install And Quick To Load.
1.) It Will Fixed On Top Either You Scroll The Page Or Not.
2.) It Also Has A Close Button So That Is Visitor Did Not Want To See, They Have Control To Close It.
3.) Easy To Install And Quick To Load.
4.) Place Here Your Top News Or Anything.
5.) Simple And Stylish Design.
6.) There Is No Image To Keep It Load Quick.
7.) Works On IE+6 And All Other Browsers.
8.) Gradient Will Also Work On IE+6 And All Other Browsers.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
Customization:
1.) Change The Red Text To Your Desire HTML, JavaScript Codes Or Text With Links.
2.) Save And Done.
7.) Works On IE+6 And All Other Browsers.
8.) Gradient Will Also Work On IE+6 And All Other Browsers.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->
<style>
#exebar{
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
width:100%;
text-align:center;
top:0px;
left:0px;
border-bottom: 1px solid #888888;
z-index: 999;
height: 28px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#exebar a{color:#eeff00;text-decoration:none;}
#exebar a:hover{text-decoration:underline;}
</style>
<script type='text/javascript'>
//<![CDATA[
function closeTopAds() {document.getElementById("exebar").style.display = "none";}
//]]>
</script>
<div id='exebar'>
+++Your Text Here...+++
<center style='padding:0px; float:right; cursor:pointer;' onclick='closeTopAds();return false;'>(X) </center>
</div>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->
<style>
#exebar{
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
width:100%;
text-align:center;
top:0px;
left:0px;
border-bottom: 1px solid #888888;
z-index: 999;
height: 28px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#exebar a{color:#eeff00;text-decoration:none;}
#exebar a:hover{text-decoration:underline;}
</style>
<script type='text/javascript'>
//<![CDATA[
function closeTopAds() {document.getElementById("exebar").style.display = "none";}
//]]>
</script>
<div id='exebar'>
+++Your Text Here...+++
<center style='padding:0px; float:right; cursor:pointer;' onclick='closeTopAds();return false;'>(X) </center>
</div>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->
Customization:
1.) Change The Red Text To Your Desire HTML, JavaScript Codes Or Text With Links.
2.) Save And Done.
Best Use Of This Bar:
This is my own opinion that the best use of this bar is here with that full tutorial, please have a look.
How To Make Your Blog For Low Speed Connection?
This is my own opinion that the best use of this bar is here with that full tutorial, please have a look.
How To Make Your Blog For Low Speed Connection?
Its Amzing Tips :)
ReplyDeleteThanks, This Code Is Now UpDated With New Code And Gradient That Will Also Work On IE+6...
Deletesalamo alaykom
ReplyDeletethank u brother; it's work for me http://pro-stats.blogspot.com/
You Are Welcome, Also Try "Hulo Bar" For Your Blog.
Delete