Try Advanced Blogger Templates Search >> 
Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Blogger Follow Us J-Query Widget ( Social Icons )
After getting a lot of questions about our social icons on our sidebar, and how to add it for blogger, i decided that blogger users deserves whats better, So today we will learn how to add a beautiful and clean Follow Us J-query blogger widget. Please see the demo , then read the steps to learn how to add it in very easy steps.
Widget Features.
- Auto resizing that fits any blogger template.
- 4 social icons including ( facebook, twitter, mail letter, and rss feeds).
- J-Query hover effect ( tooltip ).
- Clean and unique design.
Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.
Step 1, Adding the css code
Please go to your blogger account, And navigate to ( Dashbaord >> Design >> Edit Html )
And At this page, Please find the next code,
]]></b:skin>
And exactly before it, Please add the following code,
#social {
width: 98%;
height: 45px;
margin: 0;
padding: 10px 5px 5px 30px;
list-style: none;
border-right:solid 1px #853529;
position: relative;
background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;
}
#social p{
font-size:1.5em;
color:#FFFB98;
font-weight:bold;
float:left;
margin: 10px 10px 0 0;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
.abt{
font-size:0.8em;
color:#787878;
float:right;
margin: 0 -30px 0 0;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=1);
}
#social li {
width: 32px;
height: 32px;
float: left;
margin-right: 3px;
}
#social li a {
float: left;
display: block;
width: 100%;
height: 100%;
text-indent: -1000em;
background-repeat: no-repeat;
text-decoration: none;
}
#social #rss {
background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(http://1.bp.blogspot.com/--tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);
}
span.tooltip {
background: #575757;
padding: 3px;
display: block;
width: 140px;
border: 1px solid #000000;
position: absolute;
margin-top:-40px;
color: #F0F0F0;
font-size:10px;
text-indent: 0;
font: Arial, sans-serif;
text-align: center;
-webkit-box-shadow: inset 2px 2px 2px #616161;
-moz-box-shadow: inset 2px 2px 2px #616161;
box-shadow: inset 2px 2px 2px #616161;
-moz-border-radius: 5px;
border-radius: 5px;
}
And now go the the next step.
Step 2, Adding the J-query codes
At the same page in step 1, find the following code,
</body>
And before it, and the next code,
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#social li').each(function() {
var $li = $(this);
var title = $li.find('a').attr('title');
$li.find('a').removeAttr('title');
$('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();
$li.find('a').mouseover(function() {
var top = $(this).position().top;
var left = $(this).position().left;
$(this).find('span').fadeIn()({
top: top,
left: left
}, 'slow');
});
$li.find('a').mouseout(function() {
$(this).find('span').fadeOut('slow');
});
});
});
//]]>
</script>
Now please click Save Template And go ahead to step 3.
Step 3, Adding the widget code to your sidebar.
Now go to ( Dashbaord >> Design ) , You are now at page elements page,
At your sidebar, click Add A Gadget, And from the list, choose Html / JavaScript
Now paste the following code,
<ul id="social"> <p>Follow Us </p> <li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li> <li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li> <li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li> <li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li> </ul> <b class="abt"><a href="http://www.allblogtools.com/#">Get This Widget</a> | By <a href="http://www.allblogtools.com">AllBlogTools.com</a></b>
All you have to do is to change the green words to your social account urls.
And click Save
That’s it, I wish you like it and in case you wanted to download the widget images, you’ll find it here 209.
Feel free to leave your comments and feedback.
Related Tricks & Tutorials
About The Author
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here
cool man! but how to put subscribe box with blogger follow us jquery social icon?
can i share this awesome widget on my blog? i will give full credit to your blog
Hi Daus, If you’ll will give us the credits and won’t change the code any way, Then you can add it.
thanks your share. Testing…
so nice master…xixixixi
Thanks for the feature! you guys have kept your promise
but unfortunately, the widget really slows down the load time of my blog and the red border just looks odd and ugly with my layout..If you can figure that out would think about using it in my blog. Thanks
Hi sheena
you are one of our lovely visitors who asked me for make this tutorial,
and about your problems, It’s very easy to fix it,
Just follow the next steps.
1)
Don’t apply the step 2 for your blog.
2)
At step step 1 code, on the 7th line,
Please remove it,
and you’ll get it working perfectly on your blog.
nice widget.
Thanks a lot for this widget.
hi pls visit our site http://www.mastimagik.co.cc and tell me why my favicon icon get hide after few seconds ?? pls…. i’m waiting for your kind rpl
hi dude , i have downloaded your tamplate musiclife but can you tell me how to change that 5 pics??
Hi durvesh, please don’t leave comments for templates here, leave it at the template page to allow the maximum number of users to learn new info.
ok Max……i thought its new post so you will look and solve fastly here…….sorry …..and thanxx my prob. solve…..;)
ok Max……i thought its new post so you will look and solve fastly here…….sorry …..and thanxx my prob. solve…..;)
Ok durvesh, thanks for your kindness, and i’m sorry,
glad to hear that you solved your problem,
my problem is that in my site bar in my blog all the four icons facebook, twitter, mail letter, and rss feeds are not coming, only 3 icons are coming, i want all to come, what should i do
hi Max ,thank you for this one , it work so easy witj me ,but when i try any other hack don`t work in my temp,can you help me plz
this is my blog http://semo-freedoomegypt.blogspot.com/
thanks
Excellent widget. Would like to have a different banner around the social icons.
Thanks.
Can’t get the twitter link to work. Everything else looks great. Can’t figure out what to do next after trying all the ways I could think of to configure my twitter username within the code.
good info for newbie like me, I am the master of SEO in Indonesia ..
pylar.blogspot.com visit back …
Hey MAX Thanx for such a cool widget.
I’ve modified the widget with some new icons. If you allow me can I write a post about it and refer it to my blog?
I’ve linked your blog to my blog. Will you link back to me?
Thanx again!
simply awasome!
nice i tried this on my blog its look nice but there is a problem two icons goes down below the widget.
nice i tried this on my blog its look nice but there is a problem two icons goes down below the widget. how can i adjust this widget size to fit.
http://www.livepremiumcookies.com
awesome… maybe i will test it…
nice work bro, i tried this on my blog its look nice but there is a problem two icons of twitter & Facebook goes down below the widget. how can i adjust this widget size to fit. http://tech-8.blogspot.com.
Hi I added this social bar to my site and it went well. However, I soon noticed that the once installed the social bar messed up my other widget
(seen here: http://stupidblogtricks.blogspot.com/2011/06/blogger-tabbed-sidebar-widget.html)
Any advice is appreciated. Please advise.
Thanks.
Hello! I am new and I am glad I found this very helpful site! I just successfully installed this sharing widgets (i.e. fb and twitter) except for the “FOLLOW OUR FEEDS” and “SUBSCRIBE TO OUR NEWS LETTER”. What should i do? HELP!
Thanks and more power!
BFAC
I am glad I found this very helpful site! I just successfully installed this sharing widgets (i.e. fb and twitter) except for the “FOLLOW OUR FEEDS” and “SUBSCRIBE TO OUR NEWS LETTER”. What should i do? HELP!
Thanks and more power!
BFAC
I think I must try this one. Thank you for the article