How to add social media share buttons to blogger (Rounded Buttons)

× Home Freebies Earning Tricks Recharge Offers Crypto Blogger Blogspot Paytm Cash About Us Sitemap Contact Us Privacy Policy Terms Of Use .

☰ MENU

Friday 22 February 2019

How to add social media share buttons to blogger (Rounded Buttons)

Posted By: Sandeep Kumar 30 Comments

Hello friends in this post i am going to tell you how to add social media share buttons to blogger blogspot. Almost every website or blog getting popular because of the social media. Social media has the ability to send more traffic to websites or blogs. The biggest and popular social media's like facebook & whatsapp plays major role to get more traffic. If you have any blog & want to add socialmedia share buttons; then i have provided simple steps; just follow these steps and add these share buttons to your blog.

In this article i will tell you how to add rounded share buttons to blogger blogspot. I have already added these share buttons in my blog; you can check it for a demo. I have added share buttons like facebook, twitter, google plus, Pin & whatsapp. If you want more share buttons then suggest me i will add more share buttons. I have provided below Html & Css codes. Just add these codes carefully. So follow the below steps to add these share buttons to your blog.

Also Read:- Steps to add custom social share buttons to blogger posts

Steps to add rounded share buttons to blogger:-

(Before editing codes first take a backup of your theme. Because if you will do any mistake then you can restore it)

1. First login to Blogger, then goto Theme.

2. Now proceed to Backup/Restore & download your file.

3. Now tap on Edit Html.

4. Inside the code area press for Ctrl+F key. You will get a search box.

5. Now enter <head> in search box and search it.

6. Then copy & paste the below codes below the <head> tag. (If you already have these codes in your theme then don't add this)

7. Now search for </head> & copy and paste the below CSS codes above the </head> tag.

CSS Part codes:-

<b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>
 /*--------------------------------------------
 Rounded Social Media Share Buttons for Blogger
 Designed by: https://sandeep980.blogspot.in
-----------------------------------------------*/

.mobileshare {
 text-align: center;
 }
 .mobileshare a {
 background: #3a579a;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
margin-left: 15px;
 }
 .mobileshare a:hover{
 background: #314a83;
 }
 
.mobileshare1 {
 text-align: center;
 }
 .mobileshare1 a {
 background: #df4a32;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare1 a:hover{
 background: #be3f2b;
 }
.mobileshare2 {
 text-align: center;
 }
 .mobileshare2 a {
 background: #00abf0;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare2 a:hover{
 background: #0092cc;
 }
.mobileshare3 {
 text-align: center;
 }
 .mobileshare3 a {
 background: #cd1c1f;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare3 a:hover{
 background: #ae181a;
 }
.mobileshare5 {
 text-align: center;
 }
 .mobileshare5 a {
 background: #34af23;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare5 a:hover{
 background: #hover-color;
 }
</style>
 </b:if>

8. I have provided two ways to add these share buttons to your blog.

If you want to Add these share buttons below your post title then follow the below steps:-

Add share buttons below post title:

Now search for this code <div class='post-header-line-1'/> & copy and paste the below html codes below the above codes. Again search for the codes if you find these codes again; then copy and paste the Html codes below the codes.

If you want to add these share buttons after your post end then follow the below steps to add these share buttons below your post footer.

Also Read: What Is Google Adsense? How to Approve Adsense Fast To Earn Money From Your Blog or website

Add share buttons below post footer:

Now search for this code <div class='post-footer'> and copy and paste the Html codes below the above codes. Again search for the above code; if you find again the copy and paste the Html codes again below the above codes.

If you cannot find these codes in your theme then search for this code <div class='post-footer-line post-footer-line-1'> and copy and paste the Html codes below the codes. Again search for the above code; if you find these code line again; then copy and paste the Html codes below the above codes.

Html Codes:-

<b:if cond='data:blog.pageType == "item"'>

<div>
<p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&amp;t=" + data:post.title' target='_blank' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&amp;text=" + data:post.title + " via @sandeep980blog - "' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description=" + data:post.title' target='_blank' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
 <a class='whatsapp' expr:href='"whatsapp://send?text="+ data:post.title + " " + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5>
<br/>
<a href='https://sandeep980.blogspot.com/2017/10/how-to-add-social-media-share-buttons.html' rel='nofollow' target='_blank' style='font-size: 13px; float: right; margin: 5px;'>Share Buttons Widget</a>
  <br/>
</div>
</b:if>

9. Now goto Html part codes; that you have added in your theme and add your twitter name in place of my twitter user name @sandeep980blog

10. Then save your theme. Now Goto mobile theme and choose custom mobile theme in the drop down menu and save it. Now visit your blog & see how's it looking.

Share this:

Share Share Share Share

30 comments:

Social Media Services13 December 2017 at 11:58
Thank you for sharing! This article is very helpful and easy to understand. Have a good day!

ReplyDelete
Replies
Sandeep Kumar13 December 2017 at 12:06
Thanks for this awesome comment. Keep visiting
ReplyDelete
Replies
Mr Gbengz8 April 2018 at 05:47
Thanks just added to this 2 blogs and it works. So simple www.ebusinessinfos.com
ReplyDelete
Replies
Mr Gbengz8 April 2018 at 05:48
Thanks for the codes but am having problem installing it on www.healthcareng.com
ReplyDelete
Replies
Nina Athena18 April 2018 at 14:48
Thank you for sharing the insight! Your article is very helpful and informative. I would like to read more updates from you.

social media marketing
ReplyDelete
Replies
Charles C Hagaman23 April 2018 at 15:29
Buy Instagram Followers, Buy Instagram Likes, Facebook Likes, YouTube Views, SoundCloud Plays, Twitter and Vine Followers. Super fast delivery! starting at $0.99 only Buy instagram Auto Likes
ReplyDelete
Replies
Anonymous29 May 2018 at 11:39
Attention all Pinterest users…here is a fantastic opportunity that I have just discovered. This company is willing to pay good money to people who know how to pin on Pinterest.

If you have a Pinterest account and know how you use it, then this could be your lucky day. Get the full story here:

https://socialsalerep.com?hyden7218
ReplyDelete
Replies
Anonymous5 June 2018 at 09:59
Just wanted to let you know about a great opportunity I have just come across. This company is looking for experienced social media users for positions that pay really well.

I thought you might be interested. You can get all the details here: https://socialsalerep.com?hyden5142
ReplyDelete
Replies
Beverly Massachusetts Photographer13 June 2018 at 22:15
How would I add these to the footer, not post footer, but the one at the bottom, so that it shares root domain and not an individual post?
ReplyDelete
Replies
Unknown27 June 2018 at 17:06
Hackova Digi Media is the one of the best Digital Marketing service providers in Hyderabad. We have a team of experts in all areas of Digital Marketing. Hackova Digi Media provides Search Engine Optimization (SEO), Search Engine Marketing (SEM), Social Media Marketing (SMM), and E-mail Marketing services at affordable prices.
http://www.hackovadigimedia.com/
ReplyDelete
Replies
atif xhaikh17 July 2018 at 16:26
Awesome article! I want people to know just how good this information is in your article. It’s interesting, compelling content. Your views are much like my own concerning this subject.
Jasa Followers Instagram
ReplyDelete
Replies
Gtechwebindia25 July 2018 at 17:17
This comment has been removed by the author.
ReplyDelete
Replies
rohanrj25 July 2018 at 18:06
I am continually amazed by the amount of information available on this subject. What you presented was well researched and well worded in order to get your stand on this across to all your readers. web buttons
ReplyDelete
Replies
saiful27 July 2018 at 16:02
thanks for sharing!
ReplyDelete
Replies
Anonymous17 September 2018 at 07:39
Ⲛice weblog herе! Also your web site lots up very fast!
What ԝeb host are you using? Can I am getting
your affiⅼiate hyperlink for your hoѕt? I desire my webѕite loaded
up as quіckly as yours loⅼ
check this link right here now : How To Lock Files When Nobody Else Will
ReplyDelete
Replies
Anonymous20 September 2018 at 09:28
I've been surfing online more than three hours lately, but I never found
any attention-grabbing article like yours. It is pretty worth enough for me.
Personally, if all web owners and bloggers made excellent content as you did, the web
will likely be a lot more useful than ever before.
ReplyDelete
Replies
Anonymous12 November 2018 at 21:43
Its like you read my mind! You appear to know a lot about this,
like you wrote the book in it or something. I think that you could do with some
pics to drive the message home a bit, but instead of that,
this is excellent blog. A great read. I'll certainly
be back.
ReplyDelete
Replies
Anonymous13 November 2018 at 11:37
Pretty nice post. I just stumbled upon your weblog and wanted to
say that I've truly enjoyed browsing your blog posts.

After all I'll be subscribing to your feed and I hope you write again very soon!
ReplyDelete
Replies
DS21 November 2018 at 12:44
Hey Nice Post thank you.
The icons added are very small in size... could you also share post for big rectangle icons
ReplyDelete
Replies
Anonymous24 November 2018 at 01:59
I blog often and I really appreciate your information. Your article has really peaked
my interest. I'm going to bookmark your site and keep checking for new information about
once per week. I subscribed to your RSS feed too.
ReplyDelete
Replies
Anonymous27 February 2019 at 11:27
I could not resist commenting. Exceptionally well written!
ReplyDelete
Replies
Anonymous15 April 2019 at 01:45
Hello to every body, it's my first visit of this website; this blog
carries amazing and really excellent stuff in favor of visitors.
ReplyDelete
Replies
Anonymous17 April 2019 at 22:46
Hi, I would like to subscribe for this blog to get most up-to-date updates, therefore where can i do it please help out.
ReplyDelete
Replies
Anonymous23 April 2019 at 11:09
It's a shame you don't have a donate button! I'd certainly donate to this outstanding blog!

I suppose for now i'll settle for book-marking
and adding your RSS feed to my Google account. I look
forward to fresh updates and will talk about this site with my Facebook group.
Chat soon!
ReplyDelete
Replies
Anonymous29 April 2019 at 12:00
I'm really enjoying the theme/design of your site.
Do you ever run into any internet browser compatibility
issues? A handful of my blog visitors have complained
about my website not working correctly in Explorer but looks great in Safari.
Do you have any solutions to help fix this problem?
ReplyDelete
Replies
Narendra31 March 2020 at 11:46
bro i am using new seo template but thius template have post footer share icons i want to remove and add social icons whatevr you wrote in this article help me to solve
ReplyDelete
Replies

Add comment