I embedded a custom GoodReads widget on my blog and wanted to share how to do it.
(These steps are transferable and may also work for other custom widgets.)
FIrst I went to my GoodReads account homepage and clicked on ‘My Books’.
In ‘My Books’, check out the menu on the left-hand side.
You can change the appearance of the widget to meet your purpose and liking using the options under the heading ‘Customize Your Widget’.
You have several options to choose from and can decide which category of books are displayed, what information about those books you’d like displayed, how many books, and in what order. You can even select a title for your widget box.
You can preview all the changes you make by clicking ‘Save Changes’. Play around with the settings to get exactly the look you want. You can make changes, click save, see what it looks like and continue by making further changes or changing back based on what you see and like.
By clicking on ‘Customize Style’, you can make aesthetic changes to the widget.
This is where you would play around with size and placement of text, book covers, and the widget itself. You can also choose to alter the border and the colour of your widget background and text. Again, click ‘Save Changes’ to preview what it will look like.
Don’t close the GoodReads custom widget window, because if you don’t like the look or fit when you copy it into your blog, you’ll want to go back again and try some different settings. Just open your blog’s dashboard in a new window or tab.
Once it’s there the Widget should open a text box. If it doesn’t automatically, click on the little arrow on the right hand side and the widget should expand to show a box for you to paste the code into.
You are new ready to open your blog and check out your widget. Remember not to close your blog dashboard or your GoodReads. You may still want to make changes, so open your blog’s main page in a new window or tab.
If you like the look and size of your widget, you are done!
You can change the size by looking for *customize your Goodreads widget container here*. Underneath, there should be the word ‘width‘ and a number followed by px.
The number is the key to adjusting the size of your widget. If your widget is too narrow, make the number bigger. If the widget is too wide, make the number smaller.For example. My widget was originally too narrow. It’s width was 200px. I experimented and changed it to 250px. It looked better, but I thought I could go a little wider, so I tried 260px but it was too wide, so I stuck with 250. should open I wanted to try adding a custom widget to my classroom blog that would display the books we’ve read aloud in class.
I hope this tutorial was helpful in outlining how to make a custom GoodReads widget.