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.
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.
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
In the digital marketing world, Artificial Intelligence (AI) has emerged as a game-changer, reshaping how… Read More
Best tools that manipulate images and videos have become increasingly popular, and face-swapping is one… Read More
What if you could create video content that perfectly aligns with your audience's preferences and… Read More
Hi Friends, Today I am going to share an Secret Strategy that will help you… Read More
Who doesn't love the sweet sound of passive income rolling in? The thought of recommending… Read More
For any digital business, having a reliable payment gateway is crucial for businesses of all… Read More
This website uses cookies.
View Comments
Thank you for sharing such an amazing information regarding blog posting. It is very informational. Keep sharing.
Amazing write ups! Good quality content very informative and helpful.Great share...
I am stunned by the information that you have on this blog. It shows how well you fathom this subject.
Not showing
i think this is the best post even in the world....
very helpful.thank you so much.
Not Showing the social share options
You need to install code correctly.