Blogger

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.

This post was published on July 31, 2019 10:30 AM

Anant Vijay Soni

A passionate blogger and serial youtuber, timely efforts, and dedication are the key protocols that keep me succeeding. I love to share information about WordPress, SEO, Social Media Marketing, Affiliate Marketing, Make Money Online, Email Marketing and much more.

Leave a Comment

View Comments

Share
Published by

Recent Posts

  • CPA Marketing

Secret Trick Exposed: Earn $250 Daily with CPA Marketing for Free! (Beginner-Friendly Guide)

https://www.youtube.com/watch?v=wm6MXs3O5WE Subscribe to My Youtube Channel Secret Trick to Earn $250 Daily with CPA Marketing… Read More

March 26, 2025
  • Dropshipping

How to Create a Wix Dropshipping Store/Website?

https://www.youtube.com/watch?v=JqN6DRaPFYs In this Wix dropshipping tutorial, you will learn how to create a dropshipping website… Read More

March 17, 2025
  • CPA Marketing

10+ CPA Marketing Free Traffic Methods: Expert Strategies

To make good money from CPA marketing, Expert's Secret strategies are required to perform well… Read More

March 4, 2025
  • Make Money Online

How could I make money if I own a website (not from selling products)?

Are you looking to turn your website into a revenue-generating asset without the hassle of… Read More

March 4, 2025
  • Affiliate Marketing

Earn ₹2.50 Per Click with IndiaMART Affiliate Program – A Simple Guide for Beginners

Are you looking for a way to earn money online just by sharing links? or… Read More

March 4, 2025
  • Affiliate Marketing

CPA Marketing in 2025: Emerging Trends and Opportunities

Welcome to our in-depth exploration of the emerging trends and opportunities in CPA marketing in… Read More

February 24, 2025