Goodreads widget

I’m not sure where I can squeeze this onto my site/blog since there’s so little room, but I stumbled across this widget on Goodreads that I really like a lot. It shows a list of the twenty-four most recently published books you’ve read, in reverse order of publication. If I kept reliable records on the order in which I read the books, I could use that data instead; but this is still a pretty good alternative. (And maybe more useful to visitors wanting to go out and buy books.) If you have JavaScript disabled in your browser you will see a static list that is current as of the initial date of this post.

Michael’s books

Leviathan Falls
The Trouble with Peace
Interlibrary Loan
Network Effect
A Little Hatred
To Be Taught, If Fortunate
Tiamat's Wrath
The Raven Tower
The Very Best of the Best: 35 Years of the Year's Best Science Fiction
The Winter of the Witch
The Book of Magic
Exit Strategy
The Ravenmaster: My Life with the Ravens at the Tower of London
Rogue Protocol
Record of a Spaceborn Few
Spinning Silver
The Flowers of Vashnoi
Artificial Condition

Michael Horvath’s favorite books ยป

The book covers are centered with respect to one another, and are separated by 2 pixels. I added a black background and a hover effect that changes the cover graphics to appear lighter and grayer when your mouse is on top of them. I couldn’t figure out how to style the extra link Goodreads places at the bottom of the grid, so I hid/disabled it using the associated URL parameter provided by Goodreads. I had to manually add Flexbox styling to the widget since it did not include any by default, and the default styling conflicts with my blog. The grid should be responsive, though I haven’t tested the widget on my phone yet.

Here is the custom CSS code:

div#gr_grid_widget_1615614778 {
  background-color: #000000;
  max-width: 600px;
  margin: auto;
div#gr_grid_widget_1615614778 h2 {
  display: inline-block;
  padding: 4px;
  margin: 0px;
div#gr_grid_widget_1615614778 h2 a {
  color: #ffffff;
div.gr_grid_container {
  /* customize grid container div here. eg: width: 500px; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: 0px;
  margin: 0px;
div.gr_grid_container a {
div.gr_grid_book_container {
  /* customize book cover container div here */
  width: 98px;
  height: 160px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
div.gr_grid_book_container:hover {
  filter: grayscale(1) brightness(1.5);

The actual widget code can be gotten from the Goodreads website under your personal Account Settings.

Leave a Reply

Proudly powered by WordPress. Theme: isometricland by Michael Horvath based on GPLv2 or later.