Whether you are an avid reader or a book blogger, you might want to show off your love for books with a Goodreads Book Shelf Widget in your sidebar. This tutorial will show you how to do this on your template.
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.
Centering the widget in the sidebar
So
now the width of the widget is set in such a way that it fits the
sidebar. If you are a perfectionist, you might notice that there is a little bit of free space left on the right side of the widget. To create an equal amount of space on both sides of the widget, you can center it. 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. You can find the matching color
codes for your particular template in this list. You need the 6-figure code with the # in front of it. If you want to explore more color tones you can select a color code on ColorPicker.
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.