How To Add Awesome Social Sharing Widget For Blogger

Almost all bloggers and webmasters are fully aware of using social media following widgets and social sharing widgets. Social media plays vital role to increase traffic. Today I am sharing another widget and it is known as "Awesome Social Sharing Widget". The beautiful widget is used by all professional webmasters and bloggers, by add this widget it can make your blog or site attractive without effecting your blog/site loading time. How to add awesome social sharing widget to blogger blog. Follow the below steps.

LIVE DEMO

What's New

1. Easy to Install.
2. Easy to use.
3. Loads Faster.
4. Elegant Design
5. Built with best social networking sites

How To Add Awesome Social Sharing Widget For Blogger

1. Login to Blogger.com
2. Go To Dashboard.
3. Click on "Template Section".
4. Click on "Edit HTML"
5. Find ]]></b:skin> tag by pressing Ctrl+F
6. Paste the below code just above ]]></b:skin> tag.

div#bt-social-share { 
background:#f3f3f3; 
width:600px; 
height: 80px; 
border: 1px solid transparent; 
border-radius: 5px; 
-moz-border-radius: 5px;

-webkit-border-radius: 5px;   
}

#bt-social-share ul { 
list-style: none; 
clear: none; 
padding: 0px 0px ; 
margin: 25px 10px 0 0; 
float:right; 
} 
#bt-social-share ul li { 
display: inline; 
background:none; 
vertical-align:middle; 
margin:0; 
padding:0; 
} 
#bt-social-share ul li a { 
display: block; 
float: left; 
width: 32px; 
height:32px; 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYhWSXOfAi0hyaj1FXco8kGDWdyVzue7Lojov-hzvjl3oEaWyKAdx7rvChjXM7inS9vgmG2vJvxVmXocZHG2W4s5N64EQLump7Vfq7kpzZsXWokv8Hw2k5XxWDvYX6tpituooh4WGMIgq/s1600/Social_sprites.png);
margin-left:3px; 
background-repeat: no-repeat; 
margin-right: 2px; 
-moz-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease; 
-ms-transition: all 0.4s ease; 
transition: all 0.4s ease; 
}

#bt-social-share ul li a.facebook   {background-position: -0px -0px;  } 
#bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }

#bt-social-share ul li a.twitter   {background-position: -32px -0px;  } 
#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }

#bt-social-share ul li a.google  {background-position: -64px -0px;  } 
#bt-social-share ul li a.google:hover{background-position: -64px -33px; }

#bt-social-share ul li a.pinterest    {background-position: -96px -0px;  } 
#bt-social-share ul li a.pinterest:hover  {background-position: -96px -33px; }

#bt-social-share ul li a.delicious   {background-position: -128px -0px; } 
#bt-social-share ul li a.delicious:hover  {background-position: -128px -33px;}

#bt-social-share ul li a.digg   {background-position: -160px -0px; } 
#bt-social-share ul li a.digg:hover  {background-position: -160px -33px;}

#bt-social-share ul li a.addtoany    {background-position: -192px -0px; } 
#bt-social-share ul li a.addtoany:hover  {background-position: -192px -33px;}

7. Save this now jump to the next tutorial.
Note: To change widget size of box, change this value 600px;

8. Now find tag <data:post.body/> by pressing Ctrl+F.
9. After finding <data:post.body/> tag paste the following code just below it.

<div id='bt-social-share'> 
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span> 
<ul> 
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>

<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>

<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>

<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>

<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>

<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>

<li><a class='a2a_dd addtoany' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> 
</ul> 
</div>

10. Now save it.

Troubleshooting

While finding <data:post.body/> tag.You will see <data:post.body/> three times. This problem comes when we install Auto Read Hack in our blogs. For this you have to select any one tag which is given below and put the below code above given html code.

<div class='post-footer-line post-footer-line-1'>

Or

<div class='post-footer'>

Or

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/>

If you are still facing any problem kindly leave a comment. Work Done.

Enjoy!