how to set bookmarks gadget in blogger
Social networking have become very important in these days you can get allot of visitors from those social networking sites .It is very easy to make follow buttons for your blog ,just follow the few easy and simple steps and make follow buttons in your blog.Step 1
Login to your dashboard click on Design .
Step 2
Now click on Edit HTML and then check on Expand Widget Templates box.
Step 3
Find the following code by pressing CTRL+F
]]></b:skin>
Step 4
Now copy the following code and paste it before this.
#social {
width: 98%;
height: 45px;
margin: 0;
padding: 10px 5px 5px 30px;
list-style: none;
border-right:solid 1px #853529;
position: relative;
}
#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: 48px;
height: 48px;
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(http://2.bp.blogspot.com/-0KeAAI1ijs0/Tn7IiFHZh2I/AAAAAAAAASA/HzIbz4Wiwpc/s1600/1316931640_Feed_48x48.png);
}
#social #facebook {
background-image: url(http://4.bp.blogspot.com/-Yr8SqZrXMyM/Tn7IinwOgHI/AAAAAAAAASE/7mr_FURg_Tg/s1600/1316931659_FaceBook_48x48.png);
}
#social #twitter {
background-image: url(http://1.bp.blogspot.com/-h4GEKx2luVg/Tn7Ij2XIU3I/AAAAAAAAASM/_XYpLjFbkEE/s1600/1316931683_Twitter_48x48.png);
}
#social #youtube {
background-image: url(http://1.bp.blogspot.com/-UOCcat2Sifk/Tn7IjBvQi6I/AAAAAAAAASI/jAEuOjECTUo/s1600/1316931674_Youtube_48x48.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;
}
</div>
Step 5
Find the following code by pressing CTRL+F
</body>
Step 6
Now copy the following code and paste it before this.
<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>
Step 7
<ul id="social"> <p>Follow Us </p> <li><a href="http://your blogger url.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li> <li><a href="youtube#" id="youtube" title="Watch Our Videos">Youtube</a></li> <li><a href="FaceBoo#" id="facebook" title="Find us on FaceBoo">Facebook</a></li> <li><a href="Twitter#" id="twitter" title="Follow Us On Twitter">Twitter</a></li> </ul>
Step 1
Login to your blogger account dashboard and click on Design.Now click on Add a Gadgets ... then click on HTML / JavaScript.










