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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2-hmncmy_Wy1Qf-mwFmeJLZf9AYMi_Gp35IF_x9ck7IGvxt01xXL9_TxhfxdJSQiCwdTDwzopu4og8h4U8i8LeDH3e9QoeT_Ro0yJ0GsiJcpupWctl_H0ZtRq4_IeHKAyduBMmmRtjA/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4S2XrvFc0-vk-vGg_3ZUtx6HHb9yzAQLRZnh9vFCotTNIDX-94gb9hyphenhyphenCuQqC3C8HVxloZEfYdW3v2gmF75nnGtPCyDiGbqVUUo9POfyFPmzhXcMKH7O6ABtXSFZo2DGvKJ2yV8OVt5g/s400/techmatics_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvh_TpHfwfXssmBGsPvqpKGD9aeGouS2GY3zu1ZsvTzI-YMENYfHnJgBKgV2SZgwEoI_pHzy1prqNlyvsIarSSZEo1Pbw8o2_fVRjogAwNMCj2dsWgVcQoHKsGrLw_YhE_U4lB550sqM/s400/techmatics
_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYoCmSXJfQz2d3J1QCym3udUkhPPdxEWfypJP-MyDHl0-Z8ew2LdDjPih9YY6RhOzUbyXql87WCkwR1K0nZ12UO2yqDctjn1lbFx5Tp0zGRMdkgAQdgydHVn5DYrcVeAnegOgi9Ifcoxw/s400/techmatics
_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1FhaLM74gUjYKoeB8QFhhcU2_9fIfZXc4wf8NqmzzFSQnzlgDen4lVpooxt8_fHVctQOLiTphIZuOQUmvG2s0h8r6MrQo96qInstDN-HMuEMFVYPvJHgvR9uJHOCdOM8atTFaVv2Xx94/s400/techmatics
_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(&#39;loading&#39;, &#39;&#39;);
  }, 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.techmatics.blogspot.com/#">Get This Widget</a> | By <a href="http://www.techmatics.blogspot
.com">techmatics
</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 Download ( 57 hits ).
Feel free to leave your comments and feedback.