How to add Stylish Social share button on blogger posts

How to add Stylish Social share button on blogger posts

 This is an easiest way to promote your Blogger Post to social media links . If you make widget in post with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social Share links, like: Facebook, Twitter, Google plus then you should easily increase your visitors.

Social Share Botton is Very Important For Any Blogger. Its Increase Your Blog Popularity And Readers.

its Attract  readers To Share And Like Your Post. And It Increase PageViews .

Today,

I'm Going to Tell how to add Socail Share Botton In Blogger Post,

Now lets start this tutorial. Before starting this tutorial take a backup of your template.

1. Now Go to Blogger Dashboard > Template > Edit HTML and paste the below CSS Code before

</style>

/*** 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;
}
#share-post
.facebook {
background-color: #436FC9;
}
#share-post
.twitter {
background-color: #40BEF4;
}
#share-post
.google {
background-color: #EC5F4A;
}
#share-post
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZvWv-P5EjVDa94OSPoHH18Rv2T9zt8wYPJmAHb_AtHZZhCgNy49wWq3LCIwyFSodIiBb9W8qOQmnDMOE-xjZpQtN9bMdaBbOc75-gtDCN6Jf6C4kc4c0o11WUgrJjM9dOjnbA0Q3zjQ/s1600/single-share.png) no-repeat;
}
#share-post
.facebook span {
background-color: #3967C6;
}
#share-post
.twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
#share-post
.google span {
background-color: #E94D36;
background-position: -144px 0;
}

2. Now Find This Code 

<data:post.body/>

 and paste the below code After <data:post.body/>

<div id='share-post'>
                              <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'>
                                <span/>
                                Share on Facebook
                              </a>
                              <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>
                                <span/>
                                Share on 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/>
                                Share on Google Plus
                              </a>
                            </div>

 

 3. Save Template . And See, You Done...