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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2eXNkQK5GTsThEJIAeSreVNFO1rZgkVqPlYSJqxGRw5bqnu-EHx9tQgrlWSOIyLqzE86gDEvewXugZ7g5406iA7VPQI5jpopqOvG7Fr_MqR3khT_Kt24US0-UTvF0G9X9p1rr3IPOo0Y/s1600/BloggerSpice+Social-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.

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. 

Share :

Tweet

✚

আরও কিছু পোষ্টঃ