How To Add Beautiful Auto Scrolling Sticky Bar With Close Button?

Credits

Beautiful Auto Scrolling Sticky Bar With Close Button Demo

Add Beautiful Sticky Bar With Close Button In Blogger Blog

  • Go To Blogger Dashboard > Design > Edit HTML (For New Interface Templates > Edit HTML)
  • Backup Your Template Before Making Any Changes
  • Click (Ctrl + F) Search ]]></b:skin>
  • Just Above It Paste The Following Code
  •  Next Search For </head> and Paste The Following Javascript Code Just Above It
  • Finally Search For <body> and Just Below It Paste The Following HTML Code

#mbt_bar{
background:#333 url(‘http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png’) repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,”Helvetica”,sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

<script type=’text/javascript’>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!=”BackCompat”) ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = ‘mbt_clear[‘+mbtpointer+’] = setInterval(“mbtFloatInit(mbt_arr[‘+mbtpointer+’])”,1);’;
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop – mbt.mbtoffset + “px”;
}
function closeTopAds() {
document.getElementById(“mbt_bar”).style.visibility = “hidden”;
}
//]]>
</script>

<div id=’mbt_bar’>WRITE YOUR MESSAGE HERE <span style=’padding:0px; float:right’><img align=’absmiddle’ border=’0′ onClick=’closeTopAds();return false;’ src=’http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png’ style=’cursor:hand;cursor:pointer;’/></span></div>
<br/><br/> 

“How To Add Beautiful Auto Scrolling Sticky Bar With Close Button In Blogger Blog”.Click Here –>Note –Red ColorMBT blogHow To Add Cool Scrolling Sticky Bar For Blogger BlogLive DemoYou can make your own notification bar with easy way. You can add popular links, social profile links in notification bar or any important message you can mention here.

Note –

If you want to add Cool Fixed Scrolling Sticky Bar For Blogger Blog then you may follow the below link:

Subscribe
Subscribe