How to add social sharing buttons above or below every post in Blogger
In our last post, we helped you prepare a 9 point checklist to make sure that you are on the right track while early in your blogging career. One of the points was to ensure that it is easy enough for your visitors to share your content on their social accounts. As we promised you there, here we are with a how to guide to help you on how exactly you should proceed to put a tick against this suggestion.Though there are a lot of options in front of you when you decide to add sharing buttons on your website or blog, we shall go with one of the most non-obtrusive ones – placing a horizontal sharing bar that contains all the most popular sharing buttons with counters.
A word of free advice: the following guide will make much more sense to you if you have some HTML and CSS know-how. This is not a requirement, though, in any way. And we shall make sure that you don’t face any problem getting these buttons on your Blogger blog by making this guide as newbie friendly as possible.
This is how the sharing buttons will look like and how they will be placed |
- Sign in to your Blogger Account and go to Template, then select Edit HTML.
- In the HTML Editor that pops up, click anywhere in the code section and then press Ctrl. + F. In the Find box, look for data:post.body
- Press Enter repeatedly to cycle through the matches found within your code. In case more than one occurences are found, try the below steps with all of them one by one.
- If you want to display the sharing buttons before you post starts, add the code segment given below before <data:post.body> tag.
If you want to display the sharing buttons after your post ends, add the following code after <data:post.body> tag.
If you want to display the sharing buttons both before and after your post, add the following code both before and after <data:post.body> tag. - Once done, save the template and reload any single post page of your blog to test if it worked.
- Repeat step 4 and 5 if you have multiple data:post.body tags and you couldn’t get it to work in the first try.
When you are done pasting the given code, your template might look something like this. Notice that in our template, adding the given code before and after first data:post.body didn’t work and so we tried the second one, and voila, it worked as if it was like that since forever! This doesn’t imply that it will be the second one in your case
Share this tutorial with your Blogger friends. Let’s together work towards being better bloggers. ☺