How To Add jQuery Follow Us With Social Icons in Blogger

In this post i will show you How To Add jQuery Follow Us With Social Icons in Blogger

  1. Go to Blogger Dashboard --> Design --> Edit HTML
  2. Backup your Template before making any changes to your blog
  3. Now   Expand Widget Templates
  4. Find the code shown below using [ctrl+F]


      Now Paste the following code Before/above it

#social {
width: 98%;
height: 45px;
margin: 0;
padding: 10px 5px 5px 30px;
list-style: none;
border-right:solid 1px #853529;
position: relative;
background: url( no-repeat left top;

#social p{
margin: 10px 10px 0 0;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1); 

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(;

#social #facebook {
background-image: url(;
#social #twitter {
background-image: url(;
#social #mail {
background-image: url(;

span.tooltip {
background: #575757;
padding: 3px;
display: block;
width: 140px;
border: 1px solid #000000;
position: absolute;
color: #F0F0F0;
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; 

Now search


Now Paste the following code Before/above it

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);

<script src='' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

$('#social li').each(function() {

var $li = $(this);
var title = $li.find('a').attr('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;

top: top,
left: left
}, 'slow'); 


$li.find('a').mouseout(function() {






Save your template.

Now Go to Design --> Page Elements
Click on Add a Gadget then select HTML/JavaScript Widget
Paste the code shown below inside the widget.

<ul id="social">
<p>Follow Us </p>
<li><a href="" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="" id="twitter" title="Follow Us On Twitter">Twitter</a></li>

<b class="abt"><a href="">Get This Widget</a> | By <a href="">LATESTHACK</a></b>

 It is Done!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.


Post a Comment