The previous version of sticky were well entertained and some of you asked how to add Facebook like button and Google Plus button to the stickybar. If you have already added the sticky bar then you just need to make few changes to your old code. Only step#6 is different else all styling and HTML is the same which we used in our previous tutorials else you can try these new codes from start and delete the previous one. MBT's Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. Lets get to work then!
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('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/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='http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/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. :)
Filed Under: Blogger Widgets and plugins, CSS and HTMLTricks, Web Designing
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
41 comments:
hmmm nice One ...............
I did it in my way but unprofessionally :p
Good one
If have tweet button more cool.... ^_^
Thanks For Such a Good Widget. :)
itna HTML code denesey to website loading slow ho jaga.
when i click on the close button on my blog it still shows the Google+ button. Plz guide. wwwdotindiacoupons4alldotblogspotdotcom
Thanks
Good work
Nice post, it helped me a lot
can u plzz tell me how to create the Blogger template, is there any software available for it
great tutorial!
Hai Admin can you plus tweet button? ^_^
added in my blog.Works fine and thanks!
Add "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".
may Allah bless you with peace, prosperity and abundance.
Close button is not working! need your Help
www.linkstoweb.in
really cool tutorial Mohammad.
admin
Poetrylog Shayari sms Blog
@prince
It 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.
exa: Prince ,Oguntayo Mathew AdeKunle,egyhacks.
@vishnu aniyan
I 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 ?
at http://bit.ly/rBoqy4
how to add rolling feeds on this sticky bar??
T_T why my stickybar cant close, mustafa help me please...
Heyy, another nice work,
I 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
nice 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
Thanks 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.
Great it is working , except for the close button.
Yogen Basnet on 9:21 PM, March 17, 2012
yES 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)
2- 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:
I 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. :/
i 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
thankz 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 ???
SUPER WIDGET MOHAMMAD
nice stickybar...
Very Nice Tut Mohammad Bro.But would be nice if you add info about adding it to bottom.
Anyway Thanks A Lot !
www.eduways.in
I am Added It To My Blog. But, "Close Mark" In Stickybar Was Not Working..
My Blog : http://www.youthgarden.in
Please Tell Me..How To Enable Close Mark For Stickybar.
Thank You : http://www.youthgarden.in
"Close Mark" Solved.
Find below code
nClick='closeTopAdsundefined)
and Replace with this code
onClick='closeTopAds()
great widget brother .
Nice information you’ve posted Fobble Up! Always Up!
Thanks 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
www.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
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad