Steps to Add Social Bookmarking Widget in Blogger :
Note: Before making any changes to your template, take a full backup of your blogger template.
- Step 1#Log in to your Blogger Dashboard and Navigate to Design>>> Edit HTML.
- Step 2 # Copy below code and paste it just before the ]]></b:skin> code.
/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwO4xGwEaJG68lYPx7mI6Bwo_jLTefAaKbZJ-6BJdLwrR1tVt4jKswWJ0Xw8M748XNaHfOfITPQMyB0AZLNZ6ijTgorlSxeKNLGDf6OswsZhlQ1woY8wR8g3xXJSWe7yxdfUAWbBic62r/s1600/delicious.png")
; }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja726KKOK5F1RXvVX1xEgUukMH0oLEc54yv-ORpoudpVY_fFjZU7WE9eeL3B2FhoHBmrHYo2Xg63yMm4JDfhVqdmRn9BYX5UdAMwOpp4jzAvV7NdZB4TLk2gSRi0AVpANHPWSeKdgi1TEw/s1600/digg.png"); }
li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WYg9baFx-y9PK4gvv-y_Xv07NEveFvgyYNtxx4B_aOstOLIy2DsLP0XmWKyKO3rFz6uHcIbSJb3aeAphwfpTenVAxpl6K9BZdVwc7Wreim6FTVIcIXe0zGhRDEnB5xNXWoGwhGEeSKek/s1600/facebook.png"); }
li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAC0J0tPVM0Mtxpb-J5mAH71YAOsBCOVQNFBvSFlpIT3JyarW62wBZ90e29AN7DNXywiTSD14tHXPEE_z0k4Zc2RocKo8rfjwzTVd_4lDcf8nNGF7o4fQlx4NEGoJXyOYCBqvJ1EntA1H/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-5xvcvWi5EDZbhqYHW6fHzmYFMVpVIV7r02Ch5IfGqmnR4lP1EH33XmjmfeCsfoyFGW3U9fL1Ejb_xWKuP9MIJUCbQJeqhImhazNfrAy-qrg5tRPJ5fwuLF5IZwducoOckXu0_yZk-Sv/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqvFjCcP2VVs0oWJobiwamCWY-I9yO_MGhiPS2jAjMGDIzG9tXAMtAsVYyvIpbzktzUSOsdpwzycPA3fwo-Xe0hjZ_bVBPBC9vzbqkzjix8RV9OAaMuQnaF-RsPh9hsT1VUuVjy7w7Kv4/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5CxR9ztOc6DL9HJiWbFANzJEU2SEsL5T3cVXbhyn2B5lihK_QijyqRwo3gvk2N7s-79DbI3rCXTUrpRucMgezZNd-Fu9-FF8CKXcOvotizVcp6JKKTa_5HSv4TOPKn667DJcWhXD0yiF/s1600/rss.png"); }
li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoiJzApPv6MIOcPxY4Xexf8WG-8KElGNiN9yMPlEtrR3dJqbJHgmIT7VlyC1nJraqyAD7UvrO1R-7zhN053antysPf6JGwESUHJnXWpkXUIj9oXNQ45rFoIuiVobXhJYQX8uLpXfl82at/s1600/twitter.png");}
#Step 3. Copy below code and paste it just before the </head> tag. ( No need to add
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/JavaScript'>
$(document).ready(function()
{
// Hide all the tooltips
$(&quot;#jquery li&quot;).each(function() {
$(&quot;a strong&quot;, this).css(&quot;opacity&quot;, &quot;0&quot;);
});
$(&quot;#jquery li&quot;).hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$(&quot;a strong&quot;, this)
.stop()
.animate({
opacity: 1,
top: &quot;-10px&quot;
}, 300);
}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$(&quot;a strong&quot;, this)
.stop()
.animate({
opacity: 0,
top: &quot;-1px&quot;
}, 300);
});
});
</script>
- No Need , to add jQuery in above code (first line in above code) if you are already using it.
- Step 4 # Now Save the template and navigate to Design >>> Page Element.
- And now Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.
- Paste the below following code in the HTML/JavaScript Gadget and save the template.
<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://www.delicious.com/'>
<strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href='http://digg.com/'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href='http://www.facebook.com/'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>
<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li>
<li class='reddit' style='opacity: 1;'><a href='http://www.reddit.com/'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='http://feeds.feedburner.com/BestHowToBlogger'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href='http://twitter.com/'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>
- Step 5.# Finally Save template and its done!.
Like This Post Go to Comments : )
