This tutorial will guide you "How To Add Beautiful Auto Scrolling Sticky Bar With Close Button In Blogger Blog". There are too many tools available for making auto scrolling sticky bar like Hellobar is a free web tool providing this service. But when you will use this you will see the Hellobar website link on the right side of this bar.
You 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:
Click Here --> How To Add Cool Scrolling Sticky Bar For Blogger Blog
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
#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9QbWOEJeBbKsEQgLK7OYi2njrW6DmRlbjKPEdHTpMpJsnLerrDHUsdEMV2htfcweDy8rS__yLvrfvBLrNUvJa9T1-PER0ryPqzc4DW6fpyVQuG75Sz1dsnnE0kCsE3OCwtWZ9ZU7q8Q/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;}
- Next Search For </head> and Paste The Following Javascript Code Just Above It
<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>
- Finally Search For <body> and Just Below It Paste The Following HTML Code
<div id='mbt_bar'>WRITE YOUR MESSAGE HERE <span style='padding:0px; float:right'><img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqGMNPpR43i5tJo-8oOklYzrDQTMJmEv7PgG5YyCOqUSHwp7csxIl5OY5aPpZlGaG5MAUtcMuM9SjvCbgaQeSw5UNob7Pufvv0urRantg_E0HMVYadpgFU1z6bVfFP6-hCttGosyo4p2k/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>Note - Replace Red Color text with your own message or you can add link also here.
<br/><br/>
Credits
All coding credits goes to MBT blog. We are just helping for bloggers here to make blogs attractive and professionally. Keep checking Blogs Daddy for more tips and tricks.
0 comments:
Post a Comment