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)

The Impact of Artificial Intelligence on Digital Marketing Strategies

In the digital marketing world, Artificial Intelligence (AI) has emerged as a game-changer, reshaping how… Read More

October 18, 2024
  • Social Media Marketing

10 Best Free Face Swap (Deepfake) Online for Videos and Images

Best tools that manipulate images and videos have become increasingly popular, and face-swapping is one… Read More

September 12, 2024
  • Digital Marketing

AI-Enhanced Video Content: The Next Frontier in Digital Marketing

What if you could create video content that perfectly aligns with your audience's preferences and… Read More

August 30, 2024
  • Video Tutorials

Earn FREE $100 – $500 Per Day with This Secret Strategy 2024

Hi Friends, Today I am going to share an Secret Strategy that will help you… Read More

August 28, 2024
  • Affiliate Marketing

7 Ways To Promote Affiliate Links And Get Results

Who doesn't love the sweet sound of passive income rolling in? The thought of recommending… Read More

August 25, 2024
  • Payment Gateway

10 Best Payment Gateways in India (2024)

For any digital business, having a reliable payment gateway is crucial for businesses of all… Read More

August 22, 2024