How to Add 4 in 1 Follow Widget
Hello, bloggers! Previously, I've posted about Add Flapper Social Bookmarking Widget . Now, I will post about How to Add 4 in 1 Follow ...
https://iskablogs.blogspot.com/2011/04/how-to-add-4-in-1-follow-widget.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>
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
8. Now click SAVE
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('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>
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>
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/AVvXsEgsTdA_pk1OrBkPO0PcTeACCGaxpNhf22FwkiMyhwTbxIaIOv75YGXVcSUtPZ9T5FVKhyCF7BK82OYICnsxkgHm2kenpEi2ov3qlA5e39bnBGEgdQHZ5yAJLGKE2DzA5BWSoB4y749roJQ/) 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/AVvXsEhevp0BIBabeJRnFqXMCHnelRkjwF6gFgi4j_TdG18w_mOhC0-mAkX5DqOk9X_gwmgYVoOGPZz9CM_pQV7tY2ypnbPH5pg3__mi9eruI5K_SLigOSW-vjNP8KYXXbxOaFLsu5CFyKcH_kI/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfROGTuutV4H03xUlqZw-J76SmY-f4s5vD4gNF5NWend3q_U4I4XIZiqkBtjp8evzvO9GrkuKJAAXiDW3rRBOWbQ2Cmtovu4GL6RsJ5z9rcuXIOeJV-_aCPAtK7ADkSZMHoKSfNv1TtzQ/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfCqHcDeKuHaZkv3YfWUge4C2oFvrH1gSM26zQ1SmsvGMffsF8lYjFLTz3oPbn4PT6-Q068QfTCyrlmxaS-gOvvruY1uwmiGFMEbsIXoSGa6k8lZmHaPF8EcYezAF6MrFnqWSwVxKkxU/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy4GXUea870chuiDPXYHs7svwcySn5vLjy5o2kK6PlqtOIj0x3_NHrkSG0zqsxizOWMQUk_Y7rM0eP2TN9uqq2f1-Sx0rkngB1AAtexQrArY6OB-gp6MlX4yORLXXtKmXNKvZQwlLF55k/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>
#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/AVvXsEgsTdA_pk1OrBkPO0PcTeACCGaxpNhf22FwkiMyhwTbxIaIOv75YGXVcSUtPZ9T5FVKhyCF7BK82OYICnsxkgHm2kenpEi2ov3qlA5e39bnBGEgdQHZ5yAJLGKE2DzA5BWSoB4y749roJQ/) 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/AVvXsEhevp0BIBabeJRnFqXMCHnelRkjwF6gFgi4j_TdG18w_mOhC0-mAkX5DqOk9X_gwmgYVoOGPZz9CM_pQV7tY2ypnbPH5pg3__mi9eruI5K_SLigOSW-vjNP8KYXXbxOaFLsu5CFyKcH_kI/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfROGTuutV4H03xUlqZw-J76SmY-f4s5vD4gNF5NWend3q_U4I4XIZiqkBtjp8evzvO9GrkuKJAAXiDW3rRBOWbQ2Cmtovu4GL6RsJ5z9rcuXIOeJV-_aCPAtK7ADkSZMHoKSfNv1TtzQ/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfCqHcDeKuHaZkv3YfWUge4C2oFvrH1gSM26zQ1SmsvGMffsF8lYjFLTz3oPbn4PT6-Q068QfTCyrlmxaS-gOvvruY1uwmiGFMEbsIXoSGa6k8lZmHaPF8EcYezAF6MrFnqWSwVxKkxU/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy4GXUea870chuiDPXYHs7svwcySn5vLjy5o2kK6PlqtOIj0x3_NHrkSG0zqsxizOWMQUk_Y7rM0eP2TN9uqq2f1-Sx0rkngB1AAtexQrArY6OB-gp6MlX4yORLXXtKmXNKvZQwlLF55k/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