Add jQuery Follow Us With Social Icons Widget in Blogger

jQuery Follow Us With Social Icons Here is an amazing and sleek jquery widget for your blog to show-off your social profiles. As you can see in the image, this widget is very stylish and also a basic widget for every blog.This Follow Us widget is developed, using jQuery and CSS. This widget automatically fits into any blogger template and comes with jQuery hover tool tip. This widget contain social icons like Facebook, Twitter, RSS Feeds and Subscribe by Email buttons

jQuery Follow Us With Social Icons Demo

LIVE DEMO

How To add jQuery Follow Us With Social Icons to Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8ZSkcpZAg8n_2t8J5UiwMCVu4DvWj5smvGhz1MDD5Y3CUzN-_hXLhXKtzSksOdynyT0WHLqOxQcEJVXf-V0sxrcZ_Jl6QFujZEN2pI2tm_Yuuk2dTl36gb9MkgBJRIA8nEk11MtU7Fk/) 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/AVvXsEjtbAYRF75y_VwbI5QAvwLlCxwQq1t6aq_mtNQtMGY6StaMkuGQHcXxYIOtyWC2KU9NPFlrUzHWWwR2Gp9SXueungO0yavRT4qfjAX3LVEGyRkKxZWODdMfj8AxLDz5-QqPASemqIz56ks/s400/allblogtools_rss.png);
}

#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibc4EmeEUucLwqQZTwFsZjjtMjrFLG9tTTDMIsl-NmHLiDO7ofvzRM_7UyKa_dbmpG8oqKb9nSDk-f96rvSUUcof134JWbltoXInqpM7C8nu1Dk6uNpkdeyKlZ6lF6r877zuldNgRkBBE/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZaBjMLQy_DXWwWHjB9Z6QNHEuVcaFtRE2e9zlPpJDfHUffHmYg2EiLJTg8klwr-H0gbsJ5loyJztX4twhIsm1UvUzOC2U9-amPwEQuc_HS3JPpKi7mU3V8bkvEXBNneUuPwguWSqtqg/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIltxUKg6WCJ2cadQd1HSaEYBUtJwhu2k9cvBdfV9rJfALkBurm0QhpoBPqD4VIA3OJd7Es6uexaPNQrD87TMtT-p9lADPiVcidL6_aNPTlJj49z3iYFNCiQueqCuY2EhE-N7hKF8r1Ec/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;
}

• Now Find the code shown below using [ctrl+F]

</body>

• 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>

<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 Save your template

• Now Go to Blogger Dashboard --> Layout
• 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="http://feeds.feedburner.com/latesthack" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=latesthack" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="https://www.facebook.com/latesthack" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="http://twitter.com/latesthack" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>

<b class="abt">By <a href="http://www.mybloggertools.org" >Mybloggertools.org</a></b>

• Replace latesthack, latesthack and latesthacking with your twitter, feedburner, facebook username

Like it? Share it.