Home » Social Bookmarking Widgets » Another Best Social Bookmarking Widget To Add in Blogger

8
comments Another Best Social Bookmarking Widget To Add in Blogger

Today i am going to add on more social bookmarking widget in our blogger widgets tally. In the series of Best Social Bookmarking Widget for Blogger, lets add one more fascinating social bookmarking widget which will change look and feel of your blog.

Best Social Bookmarking Widget To Add in Blogger

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.

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/AVvXsEidUw3wosGSmfEkCOgQDXT3EXTO_BOgdnbozK1LlamZ5s4ia1jytAZ6_bTGfRBG0tywabJoyzlLZVSb2guQR7AgWsnFySAfeP-oVuPjdoh58244d7r8sQIMYDKDkBNYinEJZjSlMnZ8Sn4y/s1600/delicious.png")

; }

li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibk43EX48YIDQC9ozKlSFKTKqNx7laMzqD7ra7MQQQ97aZ4b7xcEEYFAKu4h29bxTjplcflrCy7ZHxIkr19A8OXFa_F94loUg0mDsMhMi7oUtxQU4zv8nem53X6-u1rfFhAXL1M_Oz5xvd/s1600/digg.png"); }

li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdUL5wpv4qKFpWErvvBFAKdPJmeQdUTBJOXsfx3wqCuyEnVEfFyHTliihLOWVIzfF-TYysrBWHP-uaGo0pUx5eDfFFdRSJZdZF-TK7xvlRe_ncNV8NJbLegmas5qjb4si6Hbv-keaphdw/s1600/facebook.png"); }

li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKotaqmpKhOCO94mCgE_HlTdVVT6pb5TtNmSIKHrVQO5ex2i2SVSFUVRsV3w7n7uO3pW3cKsBJuiAhJXmWeCeICoPsAZQUoDaenWI3FG_2GDakzQotT4BurdSHZCeIqkBxDviVLUp0H1e3/s1600/flickr.png"); }

li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ex6s2a9UKD9CbpIaV8slurkLWq_42j0z0ogu1OnCz-cBoAmwlaNUqwE_cNuDoNW7pMEqwyX3i2a53qlQstpvE6Aai7JGz5HwlTYyMEFpAf9BynyePcz-kvDySonH0t_bt4artjG2UsAx/s1600/linkedin.png"); }

li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqeAn3tAU_iE2pfOivd2kk-lHQAgUBG9_JYMS_rO27J9Byywzo2nEe2iVl9yTBWbbnxJQAP0eqcTGDVQMUutLyBGB7Xsl52RBLKUOQUfTpmiQcxlCsFGFm7o1MpRiA0m8H1wJoVUmmRmJs/s1600/reddit.png"); }

li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTT9kv8Fv8mkBcNNDOspDX-Dkysa8kb9ji2bPy5mQXQQxM76cJ2MOxdZ1uA5zY2wJDSW44SSnIYgCZgCvKLolyFu9CXfIrNXDYWNsUj9dJJaVecDjdmhuAbfJqu4tkZajXadE2a2pAri8F/s1600/rss.png"); }

li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWB1PUSdf-u1e9Y9nmntRcpXRqrdFLyZFHHVQGSbKk3oI-THDsUMTnYf_z2DS078v3h_DeP3_cnHMfIsyuLGejYaBxXDRcIC7Y_J363Z2w1YOmCnJd2g2nbuL0cp2KdT1hBvRJgRzTlqYT/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.

- Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.

- Paste the below 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 done!.

If you need any help please Leave a response.

8 Responses to "Another Best Social Bookmarking Widget To Add in Blogger" - Leave a response

Beben Koben November 10, 2010 at 10:40 PM

very useful blog my friends...
salam blogger from Bandung blogger
salam blogger \m/
Piyush - Admin @ Blogger How To Tips November 21, 2010 at 2:21 PM

@Beben, thank you very much for appreciating my work :)
Anonymous February 5, 2011 at 12:46 PM

Nice blog and tips
Anonymous February 5, 2011 at 12:47 PM

Nice blog!

I like the tips here. Need to apply some on my blog
http://nokik.blogspot.com
fufu February 9, 2011 at 12:16 AM

guys, I want to ask, this comment column look awesome. to admin blue, while others are gray. how to make it?

http://inifu.blogspot.com
Unknown February 16, 2011 at 6:56 PM

I need HELP!
http://bondingoverblogs.blogspot.com
Piyush - Admin @ Blogger How To Tips February 16, 2011 at 10:16 PM

@sharon_flavia, which kind of help ?
Travel in Hanoi - Vietnam February 23, 2011 at 2:59 PM

Thanks for this tut

Hi,
Your feedback is always appreciated. If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL.
Note:
1. Please do not spam.
2. For Asking Off-Topic Questions please comment on this page -> Blogger Help

Regards,
Best How to Blogger.