Add CSS Powered Social sharing widget in Blogger Site
Add CSS Powered Social sharing widget in Blogger Site

Social Sharing widget is important for Blogger. Because it
will help to spread your content in various social networking site. As a result
your content will reach to more people and you will receive extra traffic by
using this widget. In this social sharing widget I have included Facebook,
Twitter, Google Plus, Pinterest and StumbleUpon icons thus a visitors can share
your content to those social networking site easily. So to add this eye-catching social sharing
widget in your Blog site please follow the below tutorial-
Step 1 Log in to your Blogger account and Go to your Blogger
Dashboard
Step 2 Click on -> Template -> Edit HTML
Step 2 Click on -> Template -> Edit HTML
Step 3 Now Find this code ]]></b:skin> by
pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Paste the below code Before/above ]]></b:skin>
/**www.bloggerspice.com Share Post Styling ***/
#share-post {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#share-post a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
text-decoration: none;
overflow: hidden;
margin: 0 10px 10px 0;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
width: 135px;
height: 32px;
float: left;
padding: 0;
overflow: hidden;
text-align: center;
font-weight: 600;
}
#share-post
.facebook {
background-color: #436FC9;
}
#share-post
.twitter {
background-color: #40BEF4;
}
#share-post
.google {
background-color: #EC5F4A;
}
#share-post
.pinterest {
background-color: #DB232B;
}
.stumbleupon{
background-color:#F54E27;
}
#share-post span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(http://1.bp.blogspot.com/-qILqAtDPJSs/VQ_R1Sr_0-I/AAAAAAAAKeI/9oLEZlnxF6Q/s1600/BloggerSpice%2BSocial-Icons.png) no-repeat;
}
#share-post
.twitter span {
background-color: #26B5F2;
background-position:1px 2px;
}
#share-post
.facebook span {
background-color: #3967C6;
background-position:-22px 2px;
}
#share-post
.google span {
background-color: #E94D36;
background-position:-47px 2px;
}
#share-post
.pinterest span {
background-color:#CB2027;
background-position:-148px 2px;
}
#share-post
.stumbleupon span {
background-color:#EB4924;
background-position:-372px 2px;
}
Step 5 Now again Find this code <data:post.body/> or <div class='post-footer'> by pressing Ctrl+F
(Windows) or CMD+F (Mac)
(Windows) or CMD+F (Mac)
Step 6 Paste the below code below/after <data:post.body/>
or <div
class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<div id='share-post'>
<a class='facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span/>
Facebook
</a>
<a class='twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span/>
Twitter
</a>
<a class='google' expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Share this on Google+'>
<span/>
Google+
</a>
<a class='pinterest' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " & media=" + data:post.thumbnailUrl + " & description=" + data:post.title' rel='nofollow' target='_blank' title='Share This on Pinterest'>
<span/>
Pinterest
</a>
<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 on Stumbleupon'>
<span/>
StumbleUpon
</a>
</div>
<div style='clear: both;'/>
</b:if>
Step 7 Now hit the Save template button.
That's all. Now check your template and visit any
post and see social sharing widget has appeared at the end of every Blog posts. Final output will be like above image. I hope you and your visitors would love this widget. For any further support
feel free to leave a comment below.
Add CSS Powered Social sharing widget in Blogger Site
BloggerSpice

Contact Form
Let's Connect
Trending
- How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
- How to Make YouTube Video Responsive in Blogger Site?
- How to Submit Website to DMOZ (The Open Directory Project)?
- Float AdSense and other Ads on left or right side of your Blog
- 15 Hot SEO Google Chrome Extensions for Website SEO Analysis and Audit
- How to Add 2-Step Verification in Google Account?
- 6 Killer Tips on How to Get More Views on YouTube for Free
- How to add Google progress scrollbar on top of your BlogSpot page?
- How to Fix Bengali Font Problem in Google Chrome Browser?
- How to remove Blog Name from Post Title Tag in Blogger BlogSpot?
how to display text on stumbleupon :)
for part pinterest button .. had my share pictures instead of posting ... how the solution :)
www.1001vectors.com
I just visited your Blog.Button is displaying accurately.. But for showing full text of StumbleUpon you have to increase the button width..in above you will see in CSS script Line number 22--- width: 135px;make it 140px then full text will display. But it should be match the width according to your post body width. Thanks.
dude when i click on share icon its showing target = teitter and it become 404 error..
there is some error in share links and stumbleupon text is not showng
Hi Vignesh..thanks for your comment. I have tested twitter share and it is working fine but found problem in Stumbleupon because they have changed the share link. I will update stumbleupon share link soon.