Tutorial: How to Change Blogger's Share Buttons to Cute Custom Images

Update: I underestimated how popular this post would be! I feel like I've answered all the questions people might have with this tutorial, so I'm turning off the comments for this post. Please read the ENTIRE tutorial step by step, and then read ALL the comments if you are struggling with this tutorial. If you've tried everything and you still can't get it to work for you, then you can email me and I'll see if I can help you. MAKE SURE YOU GIVE ME YOUR SITE URL in your email, otherwise I won't be able to see your code in order to help. I don't mind helping, but please respect my time by only requesting help if you have honestly tried everything else first.

Blogger already has the option for share buttons, but they don't have a 'pin it' button and honestly, I think they look ... meh. One of my clients wanted to do something classy and customized on her site, so I looked ALL OVER online trying to find a tutorial on how to do what I wanted. I couldn't really find it anywhere, which is why I decided to share my own tutorial on how I did it. I spent waaaaaaay too long figuring this out, so hopefully this saves you the headache!

If you're savvy with HTML, you can customize this to have your own images and match your fonts/colors. If you're looking for an easy solution, I've made up some cute grey buttons that should match most any blog. Voila!

So. First things first, you're going to have to delete the Blogger share buttons that you currently have on your site. To do this, log in to your Blogger Dashboard, and go to the Layout tab. Once there, you'll see the skeleton of your blog. Find the place where your blog posts go, and at the bottom, you'll see a link that says Edit. Click that link:

Once you're in, you'll see a window that lets you configure the blog posts. One of the options is to Show the Share Buttons. Make sure this button is NOT clicked.

 Hit save. Okay. Now that the Blogger share buttons are removed, you can add the cute ones! Now you're going to want to go into your Template section of your blog.

Once you are in the HTML of your blog, click Expand Widget Templates. Hit Ctrl F and find the following piece of code: <div class='post-footer'> You might find that more than once - if so, you want the SECOND one. DIRECTLY after that piece of code, paste the following code:

Make sure you hit "Preview" to make sure everything looks right! If it does, hit save and you're all set! It should look something like this:

Or, if you want to customize it, replace the img src links with the links to your own images. Here's an example of how you could customize this code:

See? Relatively easy. If your blog template has a border around your images, you might want to take the automatic border off, but that's your call. Let me know if you have any questions or problems and I'll see if I can help! Good luck!

Another Update! I've gotten so many requests for the Google Plus and Tumblr codes that I've decided to paste the code here. If you want those icons, paste this code in instead:

Hope that helps!

Share on Google Plus

About Unknown