Flat Social Share Button for Blogger

Flat Social Share Button for Blogger - install this widget in your blog. In this tutorial i will share, how to install flat social share button in blogger like above image. This is simple social share widget for blogger. Sometimes some users looking for a unique, minimal, flat and simple social share buttons for their blog. In this blogger tutorial i will share a awesome and most popular CSS social share button for blogspot blog.

Flat Social Share Button for Blogspot 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.

Also Read: Animated Social Share Button For Blogger with CSS

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.

View Result

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 and keep sharing our posts. Thanks you...