Writing, publishing, geekdom, and errata.

HOWTO show your book covers in a blog sidebar with clickable links.

1 comment
technology.pngMy pal Sarah Hans asked how to make a sidebar widget on her blog with clickable book covers. It's pretty easy to do one like mine; I have the code below with comments to explain what I'm doing.

One thing to avoid: don't have links to every store for every book on your blog sidebar. It gets too crowded and a pain to maintain. If at all possible, have separate pages for each book with links to the store. That way you can reference that *page* wherever you need to talk about the book. For example, when talking about Don Bingle's spy thriller Net Impact, I don't have to worry about making links for each store each and every time - it points them to netimpact.alliterationink.com, where I have all those links available. Trust me - when you need to add a store, it's a lot easier to add it once than everywhere you talk about the book...

  • You need to have the ability to add a text/html widget to your blog. (Wordpress | Blogger)
  • You need to have someplace to host the covers of your books. Do not link to a store's pictures!
  • You need to have a link for each book. As mentioned, I like linking to a page with all the purchasing options available. You can have it just link to your preferred bookstore, but that has drawbacks.
  • You need to have a simple page where people can see all the purchasing options. Many blogs (hell, even Tumblr) let you create your own static pages. Use those if you are using your blog as your main website.

DO NOT CUT AND PASTE WHAT IS BELOW. Use the code hosted on Pastebin instead!

Make some degree of sense?

Two slightly complex tags:

The link. It has a few modifiers. href= points to the webpage you want to link to. target="_blank" forces it to open in a new window or page. It also closes twice...

And the image. src= points to the actual image in question. alt= shows the text displayed if your image doesn't load (and while it's loading). title= shows the text displayed when you mouseover. Those two are usually the same text.

So, here's an example with two books in two sections:

1 comment :

stevevernonstoryteller said...

All right. I've bookmarked this for when I can find the time to sit down and read it over - and hopefully figure out just how to do this properly.

Oot-grunt. Me computer caveman.