Flat Social Share Button for Blogger

Flat Social Share Button for Blogger

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.

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 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'>
                <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>

         </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...
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.


  1. Replies
    1. My apology, This widget will be like above image... :)

  2. Blog a 5 barer moto acha. kon tate bosabo. Ak ata kaj korta ca na

  3. আপনি Edit HTML এ দিয়ে এই কোডটি সার্চ করুন। তারপর এটার নিচে শেয়ার বাটনের কোড গুলো বসিয়ে দিন।

  4. Where do I paste the first set of code? You say before style. Where is it?

    1. Go to Blogger Dashboard > Template > Edit HTML and find Style

    2. I cannot find and style tag. Please advise.

    3. I can only find head, script and body closing tags.

    4. Then try to find ]]> and past above CSS code before following tag and Save Template

    5. We are in the same delima, no style in blogger default template I thing, which there is help, I need this

  5. Still no luck. It's not working. I am using Blogger's own template Simple.

  6. Kaj korca na... default ja share button aca sa gula asha.

  7. I only need FB, Twitter and G+, how?

  8. আমি তেমন HTML জানি না একটা প্রশ্ন টেমপ্লেটে তো অনেক জায়গায় /style আছে
    এখন কোন /style এর আগে CSS কোডটা পেষ্ট করবো?

  9. This comment has been removed by the author.

  10. bro give me techtunes like chain tune system