September 21, 2018

How to add a Goodreads widget to your Blogger sidebar

With the smell of Autumn in the air lots of people like to spend more time crawled up on their couch with a good book in hand. I love to read myself, although I'm not a very fast reader. I think my life will be too short to read every book that is on my wish-to-read list since that list keeps growing every day, especially since I signed up to Goodreads.

Through my work of selling premade Blogger templates I found out how big the book loving community amongst bloggers actually is. It is huge! And through these dedicated booklovers and bloggers I got familiar with Goodreads, a social platform for book addicts.

On Goodreads you can keep a personal online library of the books you have read, the books you are currently reading and the books that are on your to-read list. You are able to review a book and chat about books with fellow book lovers. You can look up interviews with authors or try out some creative writing yourself. It's absolute heaven for bibliophiles and wannabe writers. If you are not yet familiar with Goodreads and you have an interest in reading and writing I highly recommend you check it out.

But getting to know Goodreads is not what this post is about. This post is for the people that already have set up a Goodreads account and would like to show off their love for books and reading on their blogs. On their blog's sidebar to be precise, because Goodreads offers its users the option to upload a widget to their blogs and websites. In this post I am going to take you through the steps of adding your own Goodreads widget to your blog's sidebar. For this tutorial I will be using one of the templates that I sell in my Etsy shop, but the tutorial will work for most Blogger blogs. So let's get started!

1. Select the widget that you want to display

To create a widget you need to be a member of Goodreads. So if you haven't already, sign up and create your personalized (free) account there. Once your account has been established and you've added some books to your account you can build a widget. This is how you do it:

• log in to your Goodreads account
• click on your little profile image and select 'profile'
• then click on 'edit profile'

• select the 'widgets' option

You can now scroll through quite a few options for widgets that Goodreads offers, but I am going to focus on the Custom Widget in this tutorial.

As you can see, you can customize this widget. You can select if you want to display the books that you have read or the ones that you are currently reading. You can select whether you want to display only the book cover photo or more information like the title, the author and the rating of the book. Select how many books you want to show and how big the cover image should be. Just play around with checking and unchecking the little boxes for customization until you like what you see. Make sure to click on 'save changes' every time you check or uncheck a box.

Under 'Customize Style' you will find a few more customization options, so don't forget to check them out as well.

2. Insert the widget into your blogger sidebar

Once you are happy with how your list displays it is time to retrieve the HTML-code of the widget you created. Select all text in the code box and copy it.

Now go over to your Blogger blog:

• log in to your Blogger dashboard
• and select 'layout' on the left side of the screen
• once you are in the layout overview go to the section that displays your sidebar
• then select the 'add a gadget' option that you will at the top of the sidebar section

• from all the gadget options that are offered you select the 'HTML/JavaScript' gadget

• once selected the gadget will open and it will give you a box where you can paste your widget code
• after pasting the code inside the box click on 'save'

• if you don't want your widget to show up at the top of your sidebar, just drag the HTML gadget box to the position in your sidebar section where you want to display it - don't forget to click 'save arrangement' after doing this

Your Goodreads widget will now show up in your sidebar when you view your blog. In my case, I uploaded it to the Kirsten Antoinette template and as you can see below the widget appeared in the sidebar but is cut off at the right side. That is because the widget has a preset width of 300 pixels when you retrieve it from Goodreads. But we can make it all fit!

3. Make the widget fit your sidebar

Time to customize the widget some more. First we need to tackle that width issue, because we want the widget to fit our sidebar perfectly, right? This is how to do it:

• go back into the HTML gadget with the 'edit' option
• now look at the first piece of coding where you see 'width: 300px'
change that number to a number that is smaller
save the gadget and view your blog to see what it looks like

The sidebar of my premade templates is 280 pixels wide, but when I changed the number to 280 the widget was still cut off at the right side. So I played around with lowering the number even more and at 265 it was perfect. So this is something that you will have to try out yourself on your own blog. Change the number, save it and have a look. If it's still not perfect, go back into the gadget and change the number again until you are satisfied.

Centering the widget in the sidebar
So now the width of the widget is set in such a way that it fits the sidebar. In case you have some space left on the right side of the widget you might want to center it in the sidebar. This is really easy to do:

• go into the HTML-code once more
• just before the actual code begins with this text: <style type="text/css" media="screen"> type this: <center>
• so the line will now look like this: <center><style type="text/css" media="screen">
• then scroll down to the last line of the coding that ends with: </script>
• add this text right after it: </center>  this is to close the code again
• then save and view your blog, you will see that the widget is now centered in the sidebar

4. Let the widget blend in with your blog colors

If you view the widget on your sidebar you will see that most of the text in the widget (like book title, author etc.) has taken on the link color tone of your blog template. In my case, with using the Kirsten Antoinette template, it has taken on a yellow color and when you hover over it, it turns to green. This happened automatically upon installation of the HTML-code of the widget.

But the frame/line around the widget and the lines inside the widget did not change color. They are still gray. If you wish, we can change that as well. In the image below you will see the first part of the coding that I copied from Goodreads. I have highlighted the parts that hold the frame lines. We are now going to change the color of those lines.

First you want to select a color that you want to use for those lines. If you have purchased on of my premade Blogger designs you can find the color codes for your particulare template in this list. If you have another template, you can pick out a color code on ColorPicker. You need the 6-figure code with the # in front of it.

In the three highlighted pieces of text there are two that have the word 'gray' in it and the last one displays the color as '#aaa'. The first highlighted text is the outer frame line, the second text refers to the top divider line above the list of books and the third piece of text refers to the rest of the horizontal lines in the widget. To change the color of them this is what you do:

• change the word 'gray' and the code text '#aaa' to your color code of choice
• in my case I changed it to #a78635, this is what those lines look like in my case:

border: 1px solid #a78635;  &  border-bottom: 1px solid #a78635;

• don't forget to save the HTML-code and then view your blog
• the line color will have changed

The end result of my widget looked like this on the blog:

If you are a bit tech savvy and like playing with code, you can even alter more parts of the coding. Don't be afraid to try things out. If you mess up the code you can remove the gadget from your sidebar, retrieve the original code from Goodreads again, and place it on your blog once more.

Wishing all you booklovers lots of reading fun and I hope that with this tutorial you will be able to spread that love via your blog as well!

No comments:

Post a Comment