Another Good Looking Social Bookmarking Widget

People wants that His or Her Blog will be shared in so many social bookmarking sites And Websites readers do the same thing and the Author aspect more from readers. Heres is the new trick to add social icons display using css3 ,to Add this widget in your blog you need to add only 3 things and that are HTML , CSS and jQuery. You need to simply hover over the social media icons too see the beautiful effect of the widget which uses jQuery for the animation .

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>
&lt;script type='text/JavaScript'&gt;
$(document).ready(function()
{
// Hide all the tooltips
$(&amp;quot;#jquery li&amp;quot;).each(function() {
$(&amp;quot;a strong&amp;quot;, this).css(&amp;quot;opacity&amp;quot;, &amp;quot;0&amp;quot;);
});
$(&amp;quot;#jquery li&amp;quot;).hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 1,
top: &amp;quot;-10px&amp;quot;
}, 300);
}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 0,
top: &amp;quot;-1px&amp;quot;
}, 300);
});
});
&lt;/script&gt;

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