Add Share Buttons Below Every Blog Post






Hi my fellow Bibliophiles! So if you've noticed, I added some share buttons below my blog post which took me quite some time to put because I am in no ways an expert with coding so this tutorial may not be perfect but I just want to help all my fellow bloggers out. :)


1. CTRL + F LOOK FOR


The very first thing you need to do is click template in Blogger and save a copy of your current template. THIS IS IMPORTANT. Because if you mess it up, at least you'll have a copy of your old template with you. 


Now click on EDIT HTML then press ctrl + f on your computer and look for 


If nothing like that appears, you can try searching for 



and paste the code on the second one again.

2. CTRL + F look for 


and paste the code below directly above it.


This is the code where you can edit the share buttons to your liking. I have already added the background colors but if you want to change it then you totally can.

HOW TO EDIT CSS


. sharepopstbutton a: hover


If you want to change the color of the text itself when it hovers then this is the part where you should edit. I made the text hover color into white but you can change it into whatever color you want. 

Here is a site where you can choose different HEX COLORS


background-color


If you want to change the background color then you can do that by changing the hex color and choose the one you want.

.sharepostbutton li .linkedin:hover


I have set the hover color to be a lighter version of the color itself when you hover over it. If you want to change the hover color of the background itself then edit the code directly below this one and change the hover color to the one you want. 



And that is the end of my tutorial. I hope I made things clear to you because I do have a tendency to ramble. If you have any questions comment down below and I'll try to help you guys as much as I can. As I said before, I am not an expert with coding so this may not be the easiest way to put up share buttons but I'm hoping that I've helped you even just a tiny bit :)

post signature

No comments:

Post a Comment