How I Format my Book Reviews On My Site

Book ReviewI always seem to be asking Hev for her HTML templates she uses on her site. After putting my pattern HTML template in PDF form I thought to put the book review HTML template Hev gave me. This is what I use for my book reviews. It is based off of what Hev has for hers.

Hev can be found at http://tigerwhispers.com


  1. This was written for the text editor in WordPress Blog. It can be used on any HTML/PHP page. The only thing that is not usable as is are the HTML for Font Awesome.
  2. If you want to use the Font Awesome coding please go to http://fontawesome.com and do what it says. The coding for Font Awesome WILL NOT work unless you do this. The coding in this is for FontAwesome5.
  3. Know the basics of HTML. Or go to W3Schools and learn. https://www.w3schools.com/

I am going to try to go through each HTML part and tell you what it does. I am self taught. I have no training or degree for HTML or coding of any sort. I am NOT responsible should you mess anything up on your blog, web server, etc. This is just a guide describing what I do for my book reviews I offer on my site. At the end of this will be the plain code with no description of what things are. If you have any questions please contact me on my site http://crochetjessica.com Please do not bother Hev.

IMPORTANT: You will have to add CSS to your theme. Most themes let you add additional CSS. In the WordPress build I am using it is Appearance > Themes > Customize & the screen you are taken too should have ‘Additional CSS’ on the bottom of the options that show up. I will add the CSS to the end with the HTML.


BOOK COVER IMAGE

<img class=”reviewbookcover” src=”BOOK COVER IMAGE URL GOES HERE” align=”right” />

This is the coding you use to show the book cover of the book you are reviewing. If you use this in a Worpress install you can change the align=”right” to left or center. Either way if using WordPress you will have your words wrapping around the image.


Book Title, Author, Genre, & Rating

<strong>Title:</strong> <a href=”URL TO BOOK GOES HERE – USUALLY A GOODREADS LINK” rel=”noopener” target=”_blank”>NAME OF BOOK</a> <br />

<strong>Author:</strong> <a href=”URL TO BOOK AUTHOR GOES HERE – USUALLY GOODREADS AUTHOR LINK” rel=”noopener” target=”_blank”>AUTHOR LINK</a><br />

<strong>Genre:</strong> BOOK GENRE GOES HERE<br />

<strong>My Rating: </strong><i class=”reviewrate”><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”far fa-star”></i></i><br />

This is where you putt he title, author, & genre of the book at. The rating uses Font Awesome coding. If you want to use FontAwesome please refer back tot he beginning. If not use something else – just delete anything in this section in the <i> tag. If you do use FontAwesome the rating is set up for YELLOW stars with 4 solid stars & 1 empty star.


Book Description

<strong>Book Description:</strong></br>
<blockquote ><i>
DESCRIPTION ABOUT BOOK GOES HERE – USUALLY FROM GOODREADS
</i></blockquote>

This is the coding you use to show the book description as used by the place you are getting the description from. I usually use what GoodReads has. Make sure you can use the description given before using it. It is wrapped in block quote & italic tags so the reader can differentiate between the description & your review.


BOOK REVIEW

<h3>My Review</h3>
YOUR REVIEW GOES HERE

This is the coding you use to show your review of the book. I usually write the review here before posting it on any other site. It helps me make sure all grammar and spelling is correct as well as making sure it’s what I want to say. It can be as long as you want.


BOOK PROVIDER

<hr />
<p align=”center”>I received this book from <a href=”URL GOES HERE“>SITE YOU GOT BOOK FROM TO REVIEW</a> for a honest review.</p>

Did you get the book in exchange for a review? If so add this to your post. It should say that you have to do this anyhow if you got it from netgalley.com or similar sites. The <hr /> tag will provide a line break that you can see. Wherever you put it there will be a faint line across the web page. It will only put the line across the area the theme has assigned for the page. In this case it helps draw attention to the book provider.


Putting It All together

Now that is all done here is the complete HTML along with the CSS needed for the rating color & the border for the book cover.

HTML

<img class=”reviewbookcover” src=”BOOK COVER IMAGE URL GOES HERE” align=”right” />

<strong>Title:</strong> <a href=”URL TO BOOK GOES HERE – USUALLY A GOODREADS LINK” rel=”noopener” target=”_blank”>NAME OF BOOK</a> <br />

<strong>Author:</strong> <a href=”URL TO BOOK AUTHOR GOES HERE – USUALLY GOODREADS AUTHOR LINK” rel=”noopener” target=”_blank”>AUTHOR LINK</a><br />

<strong>Genre:</strong> BOOK GENRE GOES HERE<br />

<strong>My Rating: </strong><i class=”reviewrate”><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”fas fa-star”></i><i class=”far fa-star”></i></i><br />

<strong>Book Description:</strong></br>
<blockquote ><i>
DESCRIPTION ABOUT BOOK GOES HERE – USUALLY FROM GOODREADS
</i></blockquote>

><h3>My Review</h3>
YOUR REVIEW GOES HERE

<hr />
<p align=”center”>I received this book from <a href=”URL GOES HERE“>SITE YOU GOT BOOK FROM TO REVIEW</a> for a honest review.</p>

CSS

.reviewrate {color: #FFC300}

.reviewbookcover
{
border: 1px solid #eee;
padding: 4px;
background: #fff;
width: 60%;
display: block;
margin: auto;
box-shadow: 2px 2px #666;
}


Is there An Easier Way To See All this?

Yes there is! I put it in a PDF file for me to keep on my Google Drive. You can download it from here for you to use and keep.
Download PDF for this guide.

One thought on “How I Format my Book Reviews On My Site

Leave a Reply