Add Stickybar to Blogger
If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:
Follow these easy steps:
-
Go To Blogger > Design > Edit HTML
-
Backup your template
-
Search for this
]]></b:skin>
4. Just above it paste the following CSS code,
/*MBT Stickybar*/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSKHztZpc_tpuh9BHXOkpRMI6JKUmyTr-xFPkOtFICCgbCM-Yk0y67cYXy8Jo2qHlJMlN2kf_HCx9ZBkseN600AqXCeJMfwC_iiP2AP5nWoXgnAthO1xofdYdRY2xM_iEhMTbUZidVN4/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 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:12px;
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>
6. Then search for <body> and just below it paste the following HTML code
<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJe85eUg1-GdwrF-EdoldFNf9ozP7sP-u4BhKhGpBWba264JAvdHH_6riJh89QuxrfkPaOjqMPGTTya5Ns30OAtISVWXfFW3PE-A9MwZg7e9wIe7OTtAtHQvzDZDooKIvof9sXoC4GVI0/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertricks&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://www.mybloggertricks.com' size='medium'/> </div> </div>
You can write your message, announcement, anything you like instead of that purple text.
Replace blogger tricks with your Facebook Fan Page Username and replace our blog link with yours.
7. Note: Skip this step if you have already added google+ button somewhere already in your blog.
Paste the following code just below ]]></b:skin>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
8. Save your template and you are all done!
Visit your blogs to see it fixed at top just perfectly. :)
Customize
To change the background color of the bar simply edit #0080ff in step#4 with a color of your choice. Try our color generator tools. If you need any further help then please let me know. Peace and blessings brothers and sisters. :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
12/23/2011
CSS and HTMLTricks
,
Web Designing
,
Widgets
hmmm nice One ...............
ReplyDeleteI did it in my way but unprofessionally :p
If have tweet button more cool.... ^_^
ReplyDeleteThanks For Such a Good Widget. :)
ReplyDeleteitna HTML code denesey to website loading slow ho jaga.
ReplyDeletewhen i click on the close button on my blog it still shows the Google+ button. Plz guide. wwwdotindiacoupons4alldotblogspotdotcom
ReplyDeleteThanks
Good work
ReplyDeleteNice post, it helped me a lot
ReplyDeletecan u plzz tell me how to create the Blogger template, is there any software available for it
great tutorial!
ReplyDeleteHai Admin can you plus tweet button? ^_^
ReplyDeleteadded in my blog.Works fine and thanks!
ReplyDeleteAdd "We Love Comments" As a Default Comment Message
I'm new to your blog and now a days i am surfing on you blog everyday, liked your way of presentation,and your word "Peace".
ReplyDeletemay Allah bless you with peace, prosperity and abundance.
Close button is not working! need your Help
ReplyDeletewww.linkstoweb.in
really cool tutorial Mohammad.
ReplyDeleteadmin
Poetrylog Shayari sms Blog
@prince
ReplyDeleteIt wont effect the loading time because the script is negligible in size and doesn't request several calls. :)
@Harsh
For that I will need to contact Google ( :) ) with their troublesome ApI. +1 still needs development buddy.
@egyhacks
You are always welcomed here brother. Pleased with your comment. :)
@Admin @@abdulsalam @vishnu
Most welcomed pals. :)
nice info keep it up, could you tell me one thing why some commentators link appear in green.
ReplyDeleteexa: Prince ,Oguntayo Mathew AdeKunle,egyhacks.
@vishnu aniyan
ReplyDeleteI fixed the problem with help of your earlier post ( How to Create a Stickybar with "Close Button"?)
it is Now working fine :-)
www.linkstoweb.in
NOt working for me did't appear background color and image how ?
ReplyDeleteat http://bit.ly/rBoqy4
how to add rolling feeds on this sticky bar??
ReplyDeleteT_T why my stickybar cant close, mustafa help me please...
ReplyDeleteHeyy, another nice work,
ReplyDeleteI put it to the bottom because it was blocking my page list widget.
Is there any way to add total post count(number) script to the sticky bar? I am sure it will provide an impressive view regarding how the blog is growing on regular visitors eye.
Kind Regards,
hi admin
ReplyDeletenice article
www.mycsestuff.blogspot.com
how to fix it at the top of the page,i am not getting at the top of the page
ReplyDeleteThanks a lot of hardship in providing us with this hack. Unfortunately the close button is not working. I tried several times but became unsuccessful in this. Kindly Help me out with the close button in this script.
ReplyDeleteGreat it is working , except for the close button.
ReplyDeleteYogen Basnet on 9:21 PM, March 17, 2012
ReplyDeleteyES ON YHIS DAY I HAD ASKED YOU FOR A HELP ON CLOSE BUTTON.......STILL WAITING....
1- my sticky bar isn't positioned on the top (see the link)
ReplyDelete2- g+ button is positioned lower than the bar itself (see the link)
[I tried adding "padding-top" :D but no success]
Link to the picture:
http://4.bp.blogspot.com/-0NgGaPuaAxo/T3s5mv7wySI/AAAAAAAAAi4/yNqv3F54l2A/s1600/offset.jpg
One more query:
ReplyDeleteI used your "g:plusone" code and script (both from this post) to place a g+ button at the end of my navigation bar (see the link)
http://3.bp.blogspot.com/-HFWGSZqllzo/T3x9lZ3XdRI/AAAAAAAAAjE/AiDrEYbvrXw/s1600/g%252B.jpg
The thing is, it's only appearing on my home page :/
I want it to show on every page (posts' page) [like yours]
^ oops. My bad. "g:plusone" seems to be working fine. :/
ReplyDeletei guess it was my internet connection before. I actually embedded the button in nav bar which is a fixed thing (and not "data:blog.pageType") so I was pretty confident that it WILL show up on every page (and post). Im glad that I was right :)
Please resolve my query # 1 though (comment # 27)
Thanks
p.s. btw your blog resides in my sidebar (under "friends" list)
dear Mohammad Mustafa Ahmedzai
ReplyDeletethankz for ur post
but while applying this on mbt church templete its not working correctly its pointing sligthly to right
look here
http://djboysz.blogspot.com
why the bar is so like this
plz solve this problem
many of your blog posts does not work for mbt church
Close Button Not Working How To Fix ???
ReplyDeleteSUPER WIDGET MOHAMMAD
ReplyDeletenice stickybar...
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteVery Nice Tut Mohammad Bro.But would be nice if you add info about adding it to bottom.
ReplyDeleteAnyway Thanks A Lot !
www.eduways.in
I am Added It To My Blog. But, "Close Mark" In Stickybar Was Not Working..
ReplyDeleteMy Blog : http://www.youthgarden.in
Please Tell Me..How To Enable Close Mark For Stickybar.
Thank You : http://www.youthgarden.in
"Close Mark" Solved.
ReplyDeleteFind below code
nClick='closeTopAdsundefined)
and Replace with this code
onClick='closeTopAds()
great widget brother .
ReplyDeleteNice information you’ve posted Fobble Up! Always Up!
ReplyDeleteThanks for posting good Article Software
Your post is very useful Blog Tips and tricks I will surely
like and join ur site in future, be in adding good posts to ur site. peace and blessings.
Thanks…:)
hey admin, dnt noe y but the script doesnt work for me
ReplyDeletewww.theepiblogs.blogspot.com
(COULDNT FINT THE "(bracket)body>" AS WELL SO PASTED BELOW "(bracket)/body>)
But dear this is impacting our site logo because it is coming upon the logo
ReplyDeleteReally very informative content is here, thanks for sharing such info.
ReplyDeletehacker un compte facebook
Awesome! Immense information there.get people to like your facebook page
ReplyDeleteThis is a great post; it was very edifying. I look ahead in reading more of your work.bubblegum casting
ReplyDelete