Add CSS Powered Social sharing widget in Blogger Site

Add CSS Powered Social sharing widget in Blogger Site

5
data:blog.title
social sharing widget

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

Step 6 Paste the below code  below/after  <data:post.body/> or <div class='post-footer'>

 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-post'>
 <a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
                                <span/>
                                Facebook
                              </a>
<a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
                                <span/>
                                Twitter
                              </a>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
                                <span/>
                               Google+
                              </a>
<a class='pinterest' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot;   + data:post.url + &quot;   &amp;   media=&quot;   + data:post.thumbnailUrl + &quot;   &amp;   description=&quot;   + data:post.title' rel='nofollow' target='_blank' title='Share This on Pinterest'>
                                <span/>
                               Pinterest
                              </a>

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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.

sharing widget


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
4 Stars stars - "Add CSS Powered Social sharing widget in Blogger Site" S ocial Sharing widget is important for Blogger. Because it will help to spread your content ...

Post a Comment

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *