How to Add 4 in 1 Follow Widget

How to Add 4 in 1 Follow Widget | https://tipsandtricksfor.blogspot.com/2011/04/how-to-add-4-in-1-follow-widget_27.html

Hello, bloggers! Previously, I've posted about Add Flapper Social Bookmarking Widget. Now, I will post about How to Add 4 in 1 Follow Widget. Maybe it sounds like Add Mini 5 in1 Share Widget. Hoax...forget it. OK, back to this widget, this widget has some features such as 4 social icons (Facebook, Twitter, mail letter, and RSS feed), jQuery tooltip, and fresh design. Shortly, if you want to try 4 in 1 Follow Widget, just follow the steps below. Need a DEMO?

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </body>

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

4. Click SAVE TEMPLATE
5. Go to Design --> Page Elements --> Add Gadget
6. Choose "HTML/Java Script"
7. Add the code below, and customize first

<style text-type="CSS">

  #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/AVvXsEjzTOVDmRtJs8Ot7zloLz3Sx8tjBQDPqGwbmePSRkfaryM32N1-7W1BONNTrJ3Sgpa_yPEdTP4xjmK72fw7V4Tmozz9m-bf_tnQRWzngyqaKvZJp3WsAhc16jbs5ij7bGYsr03ObmmiDtw/) 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/AVvXsEhyR7D-zB9FrAWU1kx-Y6xUDiG9o-DP6aL_aeNrhGssHa2Livp8QUjNsQRfR70TDIDTWDCRhW-ggPDNMoBe6vxzPlgyCvCPfp51Q5AY_rMgvhqJKKa66XagPYo8tFBzNs9NawkTJa4HK1o/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9nuE-E-NHq2BgCnoLTtFqUcxlve-AigLrh1jmBrrNsvbCPy6Jxs22Azj2ARgWDffWMnIEvZhg2c-nF1lubzdD-w34CVBd5KDBAG9pHB0EuAsFR2dSl6_-GIKwwqbI18Q7IRAw685Ge0/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCy6Bv4E6wtwdUwwLEQB6rpQlQAviwnJ6gX2uB9s1B9N-KeK7OeW6H1rhMQtoslmxg2uM11MwyGaSh5Lko2Pr79wD9c1CcvnbBoUzez5oxeKHCWXblO2NTCHuPFDxmGIxGv44N2bCD46U/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Tpgr2Fi16KbURs3iJuu-WKp8o0w3_pzCu_O3UIOayMyxrfsAM77VUb-lEeYiV57X43AB6XVR9oGpr-CNwCsG462zJHKsRl_IpNehAbQw3NymxIbtpmKiOFYHR8ELu-AaPRWZuvNUvGs/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;
  }
</style>

<ul id="social">
  <p>Follow Us </p>
  <li><a rel="nofollow" href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>

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

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

<li><a rel="nofollow" href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul>
<b class="abt"><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/2011/04/how-to-add-4-in-1-follow-widget.html">Get This Widget</a></b>

8. Now click SAVE

Loading Related Posts