Add to Goodreads Button

As part of our blogoversary plans, I had planned for this post to have free graphics. However, when I started working on this post, I was inspired to start this new feature! In the past I only did DIY tutorials that covered a wide range of topics. Now I will be splitting that feature in half. The DIY tutorials will focus more on HTML template coding, Blogger specific tutorials, and WordPress specific tutorials. This new feature, The Designer’s Handbook, will focus on design elements for your blog. I’ll give designing advice, post CSS that can be easily used, and create free graphics. I know I said we would have some graphics today but I actually would like to work with some cool CSS that I think you’ll enjoy =)

Whenever I can think of an opportunity for elements of a blog to match, I jump at the chance! Why not the add to goodreads button? I consider a link to goodreads a MUST in any review. Let’s be honest, I’m lazy and going to goodreads myself and typing in the book name is too much work! On the other hand, some bloggers may not want to include the standard goodreads button because it stands out too much in their review. You could change it to a simple link, but I personally like buttons because they’re easier to find =)


Our new add to goodreads button will have a customized color and a customized hover color


This is the code you would insert into your blog post instead of the standard button. Just insert the link to the book review =)

Then you’ll need to find your CSS or stylesheet and paste in the code below. All you need to do is choose your color and hover color. You only do this once! These are the colors you will be using for every custom add to goodreads button.

You can choose colors here:

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

17 thoughts on “Add to Goodreads Button

  1. A quick question (sorry if it sounds a little dumb): for html coding and doing all these graphics and colour coding, you will need to have purchased a custom design right? Because I’m only using a free template at the moment. Thanks!

  2. Hello shiny new Goodreads button <3 I've tried it out on one of my newest reviews and it looks amazing, thank you so much! I'm slowly going to add it to all my reviews now. I didn't like the old look from the button, because I find the colors class with my design. This looks much.. classier and I always love that hover effect. You're the best :)

    1. Looking at your blog, it looks like you didn’t put it in the right place. You can put it in one of two places. You can go to Blogger > Template > Edit HTML (button) > search for and paste your CSS right after that. OR go to Blogger > Template > Customize (button) > Advanced > Add CSS > Paste in the CSS > Click Save.

      Lmk if that doesn’t work for you!

      1. First, thanks for taking the time to help me! I still have a TON to learn when it comes to customizing blogs! I appreciate you helping me out!!

        Second, I realized you were right before and I didn’t have the code in the right place. I followed your directions, but it’s not quite working right.

        For some reason, I’m missing the actual image. I just have an outline – and if you click on it it does take you to the Goodreads link… but no picture.

        Here is a sample post!

        Thanks again for your help! I hope I can get this to work!

        1. Hi Jessica!
          The problem is actually with CSS that was in your template before. If you go to edit your template and search for: “.post-body img” (without the quotes)
          It may not be the first one you find so search a couple times. You’re looking for something like this:
          background: #ffffff; (or background: white;)
          You need to remove that CSS attribute =)

          1. Thanks for replying again.
            I searched both in the advanced CSS and in the template with html and I hit (ctrl+f) and searched “.post-body img” (without the quotes) and couldn’t find anything. I couldn’t find “#ffffff;” anywhere either. I guess I could just scroll through it all to find it….

            I feel like I’m always such a problem when it comes to this stuff! haha it seems so simple but then there’s usually a problem with my overall current design or something. When I figure out WHAT I want exactly for my design, I’ll just go to your design shop and maybe have you make me a custom design for my blog! Then I won’t have any problems! haha

  3. I’ve never used an add to Goodreads button, but I definitely love this! I never really liked the original. I’m looking forward to this new feature you’ll be doing! :)

  4. I tried doing this and the color only comes on when I hover the mouse on it. Otherwise it’s blank. And, also, it doesn’t come out as a little button; it comes out as a long line. Any thoughts?

    1. I’d guess that you may be missing parts to your CSS/HTML. Check for 2 things first.
      1. Make sure that after you add your color to the CSS that there is a semicolon after the color.
      2. Make sure you didn’t delete the quotation marks around the link to goodreads. Those have to stay there.

      If it’s not those things, put the goodreads button up in an old post with the CSS in your stylesheet and give me the link to that review so I can take a look =)