Hello friends in this post i am going to tell you how to add custom social media share buttons to blogger posts. In my previous post i had mentioned How to add social media Rounded share button to blogger post. Almost every website or blog getting popular because of the socialmedia. Socialmedia has the ability to send more traffic to websites or blogs. The biggest and popular socialmedia'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 large 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: How to add Facebook like and share buttons to blogger
Also Read:- How to add social media Rounded share button to blogger post
Steps to add custom social share buttons to blogger posts:-
(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 tap on Backup/Restore & download your file.
3. Now proceed to 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)
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>7. Now search for </head> & copy and paste the below CSS codes above the </head> tag.
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 HTML Part codes below the above codes. Again search for the codes if you find these codes again; then copy and paste the HTML Part codes below the codes.
If you want to add these share buttons below your posts then follow the below steps to add these share buttons below your post footer.
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.
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:
Thanks very much. It worked on my blog. https://fly4study.blogspot.com
ReplyDeleteThanks for this awesome comment. Keep visiting
DeleteHello Sandeep mind only works on webview. Can you help me so that I can see the share icons on mobile view?
ReplyDeleteThese share buttons will appear on mobile screen only if you paste the html part codes on the second appearance. I mean Search the code line that i mentioned in the post and paste the html part codes and again search for the code line if you found more than one then paste the html part codes again. But These share buttons are too large and does not fit to mobile screen. Goto this page How to add share button to blogger(mobile fit) . Read the post carefully and copy and paste the codes to your theme.
DeleteOk i did it today and it worked. Thanks very much bro. will always visit your blog for updates. Thanks once more. I will also need whatsapp with time
ReplyDeleteWelcome and nice to hear it worked on your blog
Deletethanks
ReplyDeleteVisited there last weekend with a group of friends, and had all the fun we could handle. I really like the ambiance at home studios NYC. There's a decent draft beer selection at a reasonable price and the bartenders are good at what they do.
ReplyDeleteHi Sandeep, this post was indeed helpful. My simple request is, could you kindly add Instagram share button as well? Once you update the post with instagram, bloglovin, I would try your method and use the codes :) Thank you!
ReplyDeletewww.naturalbeautyandmakeup.com
Hello friends, how iis all, and wnat you want tto say
ReplyDeleteconcerning thyis paragraph, in my view its actually awesome
in support of me.
I'm curious to find out what blog system you are utilizing?
ReplyDeleteI'm having some minor security problems with my latest website and I
would like to find something more safeguarded. Do you have any suggestions?