inquiring minds

international teaching

Custom Widgets Tutorial – Goodreads

1 Comment

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’.

Custom Widget Tutorial #1

In ‘My Books’, check out the menu on the left-hand side.

Custom Widget Tutorial #2

Find and click on ‘Widgets’.
Custom Widget Tutorial #3

If you scroll down, you will see several widget options. You’ll most likely want to create a ‘Custom Widget’, that will look something like what’s in the red box below.
Custom Widget Tutorial #4

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.
Custom Widget Tutorial #5

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.
Custom Widget Tutorial #6.5 (1)
By clicking on ‘Customize Style’, you can make aesthetic changes to the widget.
Custom Widget Tutorial #6

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.
Custom Widget Tutorial #7

When you think you could be satisfied with what you have and are ready to test it out on your blog, grab the code from the HTML box by copying it. (Highlight the full text and “Command C”.)
Custom Widget Tutorial #8

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.

On your blog’s editing menu click on the Appearance tab. Find and click on ‘Widgets’.
Custom Widget Tutorial #9

Your widgets page should look something like this:
Custom Widget Tutorial #10

You’ll want to find the ‘Text’ Widget.
Custom Widget Tutorial #11

Decide which sidebar you want your widget in and click on the arrow to open it up. Drag the text widget into the desired sidebar.
Custom Widget Tutorial #12

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.
Custom Widget Tutorial #13

Paste the copied code into the HTML text box in your Text Widget. (“Command P”), and click ‘Save’.
Custom Widget Tutorial #14

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.
Custom Widget Tutorial #15

If you like the look and size of your widget, you are done!

If your Widget is too big and part of it is cut off or if it’s too small and looks smooshed or silly, go back to your widget’s page and take a look at the code you pasted in your text box.
Custom Widget Tutorial #16

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. 

A couple things that helped me when I was embedding my widget were the GoodReads help page and the WordPress help page.

 

Advertisements

One thought on “Custom Widgets Tutorial – Goodreads

  1. For those of you living in a high altitude, you will
    likely need to adjust the cooling time. As soon as the water gets
    in to the chamber with the java beans, the brewing process
    is initiated. The fantastic part in regards to
    the k cup is its capacity to produce a fresh walk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s