How to Add Flat Social Share Button To Blogger/Blogspot

In this tutorial, I will show you, how to add/install a flat social share button in blogger like the above image. This is a simple social share widget for blogger. Most of the users looking for unique, flat, minimal, and simple social share buttons for their blog. In this blogger tutorial, I will share an awesome and most popular CSS social share button for Blogger or Blogspot blog.

How to Add Flat Social Share Button To Blogger/Blogspot

Social share buttons are the greatest way to increase blog traffic. When users are found your blog post is helpful then they will share your posts with friend and family on social media. Social share buttons are an important part of every blog, you need to add an attractive social share icon, then they can easily share your content.

Why Social Share Buttons Important?

Social Media Icons are a great example of Mouth Publicity. Also, the social share button can help to grow up your visitors for your new or pro blog. It's your first priority to add a social media widget on your blog, Because of A Blogger or an Author in Nothing without Readers.

Every blogger has must need to add social share button in their blog. Cause, it's a great method to increase blog traffic. Nowadays, social media is the best and easiest medium to communicate with each other.

I think its enough, No need to explain more about the importance of social share buttons.

So… Let's start the tutorial, follow the below steps to add Flat Social Media Share Button on Blogger.

Step 1: Login to Blogger Dashboard > Theme > Edit HTML and copy paste 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}

Step 2: 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'/>

Step 3: Now add this code right after <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

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

                <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

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

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

Step 4: Click on Save Template.

That's it. You have successfully added the Flat Social Media Share Button on Blogger. Now refresh the page and see the magic.

If you found any problem, comment below and keep sharing with your blogger friends.