Simple Social Share Button for Blogger

A social share buttons is a important part in every blog. Its the greatest way to increase every blog traffic. When users are found your blog post in helpful then they will to share your posts on social media. In your blog's has a attractive social share icons, then they easily share your content in their account.
Importance of Social Share Button - No need explain about importance of social share button. However saying, a social share button can grow up visitor for your blog. Social share button help to holding visitor in your blog. Every blogger have must need to add social share button in their blog. Cause, it's a great method to increase blog traffic. Now a days, social media is easiest and common method to communicate each others. So, you should got a much number of visitors from social media.


Now come to the main part. In this tutorial i share with you this important widget. Follow the below steps.

Step1: Go to Blogger Dashboard > Template > Edit HTML and copy past below CSS code before </style>
/* CSS Share Button */
.sharepost li
{width:19%;padding:0;list-style:none;}.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}.sharepost li .twitter{background-color:#55acee;}.sharepost li .facebook{background-color:#3b5998;}.sharepost li .gplus{background-color:#dd4b39;}.sharepost li .pinterest{background-color:#cc2127;}.sharepost li .linkedin{background-color:#0976b4;}.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover, .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}.sharepost li{float:left;margin-right:1.2%}.sharepost li:last-child{margin-right:0}.sharepost li .fa:before{margin-right:5px}

Step2: Now past below code before </head>tag.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Step3: Now add this code right after <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

<li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

</ul>
</div> </b:if>


Now Save Template.

That's it. Now refresh page and see results. If you found any problem, then inform me on comment section.