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 Blog Spot 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. You Can See It Live Just To The
Right Of My Notification Or Sticky Bar Or Fixed Bar At The Top Or Click
Live Demo Baton Bellow. 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 Dashboard>> Template>> Edit HTML
Backup Your Template
Search For This
]]></b:skin>
4. Just Above It Paste The Following CSS Code,
/* --Blogger Sticky Bar By Www.Mybloggertopic.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; }
5. 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>
6. 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.mybloggerblog.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/AVvXsEj5403nH1xmtZ6tYQq0kjU_rEvGvqM0Odfv0ClJ90s8eRfHAYGDobvuDs8xMn6qZSAUnOhQF-GxJ54ujiQCu65FFeOQnouuqWCsQBSnkEeukVTD05DZR76pvmtXU5Ho91AVqYvm6aHnEU3l/s400/cancel.png'
style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
7. Save Your Template
8. 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:
To Modify The Background Color Of The Bar Then Simply Change This #232323Use Our Color Code Generator For Doing This.
Replace http://www.mybloggerblog.com/ With Your Text Link (Can Be Your RSS Link, Important Post Link Etc.)
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.
Rana Shaharyar is a 19 year old young Blogger, currently living in Pakistan Wah Cantt. He is Founder cum editor-in-chief of ITDuniyaa He is not a professional. But Still he can play with Blogger Template Codes, Web Developing, Graphic Designing, Html, Css, Jquery,logo Designing and Blogger Widgets.He can also clone blogger templates,and he came in lime light by cloning some famous and difficult templates of some famous blog's.
0 comments:
Post a Comment