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.
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.