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

  • Artificial Intelligence (AI)

Human vs. AI Influencers: Strategies for Maximizing ROI

Influencer marketing is now a key part of successful digital marketing campaigns. However, things are… Read More

February 20, 2025
  • Blogging

Top 10 Free Blogging Websites to Kickstart Your Online Presence

Launching your own site and sharing your thoughts with more people is now simple. There… Read More

February 20, 2025
  • Artificial Intelligence (AI)

Grok 3: The AI That’s Smarter Than You Think

A Comprehensive Review of Grok 3: xAI’s Latest AI Powerhouse Grok 3, unveiled by xAI… Read More

February 20, 2025
  • Pinterest

How to Create Eye Catchy & Clickbait Pinterest Pins with AI (Using Ideogram)

Discover how to create scroll-stopping Pinterest pins with AI! Using Ideogram and a custom prompt,… Read More

February 19, 2025
  • Best AI Tools Directory

13+ Best AI Writing Tools Comparison | Hidden Gems with Ai Writing Generator

The landscape of content creation has undergone a revolutionary transformation with the advent of AI… Read More

February 17, 2025
  • Artificial Intelligence (AI)

How to Become an AI Influencer in 2025: Ultimate Guide

The rise of AI influencers like Drishti Katiyal, Lil Miquela, Shudu, and Bermuda has revolutionized… Read More

February 15, 2025