Step-by-Step How to Format Book Review Information (The Common Way)

book-reviewb

When I first started blogging, one of the first things that I noticed was how the book reviews were formatted. Most all of them were formatted a certain way. I’m not sure who originally came up with this formatting for book information in a review, but it would seem most bloggers follow it.

Now I’m not saying that as a book blogger, you HAVE to format book reviews in this way. I mean, I like it, but you can format your reviews however you want to! I personally like the book information in the review so I don’t have to go to Goodreads before reading your review. I get questions every now and then on how to format reviews in this way, especially with how to do the background behind the book blurb (blockquote). If you’re on WordPress (self-hosted) go buy the Ultimate Book Blogger plugin. It’s an inexpensive and awesome plugin!

For the rest of you though, setting up the book information could be very confusing. So, I’ve written a step-by-step guide on how to format the book information in a review for Blogger and WordPress. It seems like a long process with all these screenshots I’ve included, but once you get the hang of it, it goes pretty quickly.

Blogger

All right, let’s get started with Blogger first. When you first open up a new post, the first thing you’ll want to do is insert your image. Use that little picture icon tool to upload images. Don’t take the url from Goodreads.

add-image

Once you have the image added, click on it to highlight it. You’ll see that blue bar appear, like below. Now this depends on your preference, but select Left to have the book cover on the left side of the screen or Right to push the book cover to the right side of the screen. Most reviewers seem to do Left, but I’ve seen some do Right as well :)

float-left

After you’ve positioned the image, click your mouse to the right of the book (or left if you positioned it on the right) and begin typing your book information. I manually type in the book title, author, series, genres, and then paste in the book summary from Goodreads. I also like to bold the book information labels. Then I add in the link to Goodreads.

add-text

If you pasted in any text from Goodreads or an outside source, it will come with formatting from that site. That can make the font of your book summary looks different than the rest of your post. To avoid that, highlight the entire book summary and click the Remove formatting icon. Looking good so far!

remove-formatting

What we want to do is add blockquote tags around the book summary. You DO NOT want to add inline styles to your book information to apply a background color. Why? Because as soon as you update your design/theme, your posts won’t match anymore. Blockquote is an HTML element that we can easily change in CSS that will automatically affect all of your posts that use it!

If you want instructions for styling your blockquote, see this tutorial.

So just select the book summary text and click the Quotes button, like below:

blockquote

The last step I like to do is give my review a heading like “My Thoughts.” Don’t do headings by increasing the font size and changing the color using the post editor tools. Doing that is setting an inline style again and doesn’t change if you update your overall blog theme/template. Always use headings for this and setup the styles in your CSS file. If you haven’t done that, I have some examples in this tutorial.

heading

After that, you’re done! Not so bad, right?

final

WordPress

WordPress follows a similar process, but some of the steps are a bit different. To start, upload your image and choose Center for the Alignment. I don’t choose Left or Right alignment to start, because it’s harder to add text when you start of with the image left or right aligned.

add image

Once you have the image added, hit enter so your cursor appears after the book and begin typing in your book information.

funny cat

Cat Tip!

Useful Tip! When you press enter in WordPress it creates a whole new paragraph instead of a single line break. BUT if you press SHIFT + ENTER you get a single line break! (When you get to the book summary, do just an ENTER! That needs to be separate from the book information)

Also, it would seem WordPress is smart enough not to bring formatting with it when you copy and paste summary text from Goodreads. So you don’t need to worry about that like you would with Blogger.

add-text

After you have all of your book information typed or pasted in below the book cover, click on the book cover image and select the Align left or Align right buttons (depending on your preference).

align-left

Now your book information will move up next to your book cover :)

At this point, I bold the book information labels and add in my Goodreads link.

formatting-text

After that we need to add in the blockquote tags. I’m going to say the same thing I did for Blogger.

What we want to do is add blockquote tags around the book summary. Be careful with this! If you were doing a SHIFT + ENTER for entering book information make sure you do just an ENTER before the book summary. We need this to be a separate paragraph, otherwise everything will get wrapped in blockquote tags.

You DO NOT want to add inline styles to your book information to apply a background color. Why? Because as soon as you update your design/theme, your posts won’t match anymore. Blockquote is an HTML element that we can easily change in CSS that will automatically affect all of your posts that use it!

If you want instructions for styling your blockquote, see this tutorial.

So just select the book summary text and click the Blockquotes button, like below:

wordpressblockquote

Now comes the time to switch to the Text tab. This is where the HTML of your post lives! The first thing I like to do is change the book cover width size so it’s a bit smaller. You can keep it as is, but I like mine to be 280 in width.

If you do change the width of the image, don’t remove the quotes around that number (right now it’s 314). Also, make sure to change height to be “auto”. Just replace the number with the words auto and keep the quotes. That way the height will automatically adjust to the width you set to keep proportions right.

set-width-and-height

Finally, I like to add a heading to my book reviews. Don’t do headings by increasing the font size and changing the color using the post editor tools. Doing that is setting an inline style again and doesn’t change if you update your overall blog theme/template. Always use headings for this and setup the styles in your CSS file. If you haven’t done that, I have some examples in this tutorial.

For adding headings, switch back to the Visual tab and click the toggle toolbar button:

toolbar

Then select the paragraph drop down and choose a heading.

heading

Then you’re done! Click save and preview your creation :)

final

Hopefully this tutorial helps if you’re a newer blogger or even a more experience blogger looking for a way to format review information! Let me know if you have any questions in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

17 thoughts on “Step-by-Step How to Format Book Review Information (The Common Way)

  1. This is great Stephanie! I find Blogger to be super finnicky when it comes to adding pictures and formatting them the way you want. I don’t currently use blockquotes because I’ve always thought they were a bit too complicated but I’ll check out your tutorial because I really do like the look of them. Also THANK YOU for the advice with heading & subheadings. I always just change the size but that makes so much more sense.
    Annie recently posted…Feeling My Age in the Blogging CommunityMy Profile

  2. It’s very nice of you to write this up for people and do it for both WordPress and Blogger. :)

    Just reading through it, there was one thing I wasn’t quite sure about:

    If you don’t have the TinyMCE Advanced plugin added to your blog (and you’re self-hosted), I highly recommend it! Without it, you’ll have to go to add heading HTML tags manually, like below:

    You don’t need TinyMCE Advanced to get access to the heading button in the visual editor, if that’s what you’re saying. (If not, feel free to ignore me!) You just have to click the “Toolbar Toggle” button in the visual editor to bring up the second row. Then if you click the “Paragraph” dropdown menu, you get access to the Heading 1, Heading 2, etc. tags.

    Just thought I’d clarify that if people want to add headings without a plugin. :)
    Ashley recently posted…Review: Jesse’s Girl by Miranda KenneallyMy Profile

    1. It seems my quote has completely disappeared. :P I just put this in blockquote tags:

      “If you don’t have the TinyMCE Advanced plugin added to your blog (and you’re self-hosted), I highly recommend it! Without it, you’ll have to go to add heading HTML tags manually, like below:”
      Ashley recently posted…Review: Jesse’s Girl by Miranda KenneallyMy Profile

  3. Thanks for sharing this! I used to try to figure out how to format the the book info part until I gave up and install the Book Review plugin on my self-hosted WordPress blog instead. Your article is a must-read for newbie book bloggers. Keep up the good work. :)
    Regina Foo recently posted…Are You A Book Collector?My Profile

  4. I just want to say thank you for all the awesome tips! I decided to start a book blog a few days ago and I’m still a little lost about it all, and this helped a lot!

  5. Hi!!!! Could you pls pls help me?? I’m also a YA book blogger and i’ve searched everywhere on how to do this blockquote for the synopsis but when i use it in my post, the background color of the blockquote stays white no matter how many times i change it…so basically i’m only left with a slightly central text with no background…
    kariny recently posted…STACKING THE SHELVES (1)My Profile