Sunday, November 3, 2013

// // Leave a Comment

Add Blogger Notification or Hello Bar or Fixed Bar with "Close Button"

Add Blogger Notification or Hello Bar or Fixed Bar with "Close Button"

This Sticky Bar Or Fixed Bar Works Best By Clutching Readers Attention And Helps You To Focus Readers Towards Important Deals, Announcements Or Any Story. Blogger Notification Bar Needs No Registration And Offers Far Best Design Flexibility. The Scripts Are Less Than 7KB In Size And Fully Hosted At Your BlogSpot Server.  You Can Modify Its Look And Theme To Any Color That May Blend Your Layouts. Every Single Element Is Well Structured And Can Easily Be Configured. I Am Excited To Share It With You All. Let’s Get To Work!

Installing This Gadget On Blogger

You May Follow The Easy Steps Mentioned Below In Instruction To Add The Widget To Your Blogger Blogs.
Follow These Easy Steps:

  • Go To Blogger > Design > Edit HTML
  • Backup Your Template
  • Search For This
]]></b:skin>

  • Just Above It Paste The Following CSS Code, 
/* --Blogger Sticky Bar By Www.Tonyisright.Blogspot.Com-- */
#mbt_bar{
background: #232323;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:5px 0 5px 25px;
box-shadow: #666666 0px 1px 3px;
z-index: 9998;
height: 27px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: Helvetica, sans-serif;
line-height: 24px;
border-top:1px solid #000;
border-bottom: 2px solid rgb(255, 255, 255);
}
#mbt_bar a{
text-decoration:underline;
color:#FFFC00;
font-size:12px;
font-weight:bold;
font-family: verdana, arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt_bar a:hover{
text-decoration:underline;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}
#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 10px;
}

  • 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 style='z-index:999999; position:absolute; margin-right:20px;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='20' side='right' trigger='30%'/></div>
<div id='mbt_bar'><font style='color:#FFFC00;'/><blink> Latest!! </blink>
<a href='http://www.tonyisright.blogspot.com/' rel='nofollow'>Blogger Widgets and plugins</a> 


<span style='padding:0px 0px 0px 6px; margin:0px;'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg43ralWEB-yH1Fq8K2SxCMN9PI69vXaXyucoKCXHJirLTBKGz2pPrXOHDQv-1tOVu4EQ684pPTBeLcSB8AB548ySqHh1U9dSKpuURYJDmqFaTvdJxsXzvokaNRQH2MP7mKSrqJHk6o955/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

  • Save Your Template
  • You Are All Done!

Visit Your Blog To See It Fixed To The Top Just Beautifully With A Close Button Waiting To Be Clicked! 

Customizations:

  1. To Modify The Background Color Of The Bar Then Simply Change This #232323 Use Our Color Code Generator For Doing This.  
  2. Replace http://www.tonyisright.blogspot.com/ With Your Text Link (Can Be Your RSS Link, Important Post Link Etc.) 
  3. Now Replace Blogger Widgets and plugins With Anything You Wish To Write.

If You Face Any Problem Installing This Widget, Submit Your Problem In Comments.

0 comments:

Post a Comment

Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.

Note: Please do not spam. Those type of comments will be deleted upon our review.