How To Add Social Sharing and Bookmarking Widget With Color Hover Effects At The End Of Every Post ~ BLOGGER

You have created a blog and started posting whatever you want to share with your blog readers.Some readers like your post(s) and they want to share it with their friends or on popular social networking sites then they should have an option to share your post(s) on social networking/sharing/bookmarking sites .It will increase the traffic to your blog.

This widget uses CSS3 to create beautiful color effects when someone hovers over the icons of different social networking/sharing/bookmarking sites.CSS3 is the latest standard for CSS.This coding will make icons change color from gray to their respective official logo color.

In the above screenshot,see the fourth icon from the left side.It's stumbleupon icon and when I hover over it,it changes color from gray to official logo color.For live demo you can see it below this post.

So,if you want to add this widget to your blog then follow the instructions:

Before making any changes to your template, backup your template.

Step I:Adding the widget codes with sharing links.The last code line(see the last icon in the above image) will give the readers option for sharing on more than 120 sites.

1.Log-in to your blogger account and go to Dashboard-->Design-->Edit HTML

2.Check the "Expand Widget Templates" check-box.

3.Search[Ctrl+F] the following code:

<data:post.body/>

4.Now,add the following code just after that:

<b:if cond='data:blog.pageType == "item"'>
<div dir='ltr' style='text-align: left;' trbidi='on'>
<div style='color: red; font-family: Georgia,"Times New Roman",serif;'>
<span style='font-size: large;'><u><b>Share This Post:</b></u></span></div>
</div>
<div id='w2b-share'>
<ul>
   <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
   <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
   <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
   <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stumbleupon'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Delicious'/></li>
   <li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
    <li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='linkedin' expr:href='" http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Linkedin'/></li>
   <li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
   <li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
   <li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
   <li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Myspace'/></li>
   <li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Step II: Now,style the above links by adding sharing icons and changing color using the CSS3.

1.In the Edit HTML,search for the following code:

]]></b:skin>

2.Now,add the following CSS coding just above it:

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://lh4.googleusercontent.com/-4uvUSVwS-H8/Tm0V2iQcWnI/AAAAAAAABWI/OxHmIL7C2h4/s800/sharing%252520icons%252520by%252520HEMMANNT.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px; }
#w2b-share ul li a.facebook   {background-position: -32px -0px; }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover {background-position: -192px -33px;}
#w2b-share ul li a.stumbleupon {background-position: -64px -0px; }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.del-icio-us {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover {background-position: -128px -33px;}
#w2b-share ul li a.technorati {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px; }
#w2b-share ul li a.mixx:hover {background-position: -96px -33px; }
#w2b-share ul li a.yahoobuzz {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover {background-position: -576px -33px;}
#w2b-share ul li a.linkedin   {background-position: -256px -0px; }
#w2b-share ul li a.linkedin:hover {background-position: -256px -33px;}

3.Save the template and you will see the Social Sharing and Bookmarking Widget at the end of every post!!

BLOGGER

How To Add Social Sharing and Bookmarking Widget With Color Hover Effects At The End Of Every Post

This post was written by: Hemmannt

0 Responses to “How To Add Social Sharing and Bookmarking Widget With Color Hover Effects At The End Of Every Post”

Post a Comment

Subscribe/Join

Search

Translate

Followers

Flag Counter