So I’ve been using HTML for the past few months to make my blog posts a little prettier and professional looking. I am absolutely by no means a professional, and most of what I know, I know because I googled it and failed a few times before getting it. But, I thought a how to post would be handy!
When I was scrolling through Pinterest I actually came across this post by Aimee Always, where she explains how to use HTML to style your reviews a little better. So some of what’s in this post is inspired by her!
Let’s start with the basics
A lot of you will probably already know these things, but it’s handy to have them nearby because you can incorporate them into slightly more complicated HTML codes!
<b> … </b> – This makes you text bold
<i> … </i> – This makes your text italic
<u> … </u> – This will underline your text
<p> … </p> – Will start and end a paragraph
<br> … </br> – This will indicate a line break
<h2> … </h2> – This indicates an H2 level header, obviously you can interchange the 2 for a 3 or 4 as well if you want to use smaller headers!
<center> … </center> – Center your text or image, or even your GIFS!
Now let’s move to the technical stuff
I love using HTML headers now that I know how to use them. You can play around with the font size, the font family, and all the colors on the spectrum! Using large, colored headers will definitely make your blog post pop. And it makes it easy to read too, in my opinion. Anyway, here is how I build my headers:
Tip: the text in orange is what you can change to your liking! I find it easiest to put in the colors in hex code form, so don’t forget to add the #!
The result is any of my headers in this post, but I also use this style header for book titles in my reviews. And that looks like this:
Making specific text a different color
As you can see in most of my previous posts, sometimes a single word or sentence is a different color. Unfortunately, WordPress doesn’t allow you to select a color for only one word (at least, I think), so long live HTML! I also like to make the colored text bold so that the text pops just a little more. Here’s how to do this:
How to insert a hyperlink, but make it pretty
When I insert a hyperlink, I still want to be able to determine which color the text is. I haven’t quite figured out yet how to make the text color change when I hover over it with my cursor, but maybe one day I will and update this post. Here is how to insert a hyperlink:
Use block quotes!
This is one I found on Aimee’s website, and I use it in almost every post now. Block quotes make it easier to make a synopsis stand out. But I sometimes I also just use them to make my post look a little more playful. You can change the padding size to whatever you want, but I find that 20px looks best.
Create your own buttons!
This one is also from Aimee’s website, but you can change the destination of your button to anything you like. I use them for Goodreads, and recently also for The Story Graph! But you can also link your Pinterest, someone’s else’s blog… anything really! This code is pretty long, so I suggest saving this one in a document somewhere you can easily copy-paste it.
Inserting an image with a URL
To save space in my media library, I now insert images with a URL. I always use images when I make a review, and inserting them with HTML requires a little more effort than just pasting the image address. So here’s how to do it:
You can make the image any size you want, but I find that for reviews 270×400 pixels works really well. “hspace” refers to the amount of space around your image. If you don’t have hspace, your text will be pushed against your image with no space in between. I put this space it 25 pixels, but you can experiment with that too, of course!
Making your post look like this:
Wanna know how to achieve the same as the image below? Just combine ~almost~ all you’ve learned above in this order:
1 – Insert image
2 – Book title with H2 header
3 – Book author with H2 header and smaller font size
4 – Publishing information
5 – Your rating
6 – Insert the buttons
7 – Insert the blockquote
8 – All done!
Playing around with these HTML codes is super fun, and you can mix and match anything you want. Change the font, change the color, change the size… it’s all possible! However if I have on big tip, it’s to check if your code works often! I’ve spent so much time going through all my code trying to figure out where I made a mistake. So my advice is, every time you write some HTML code, check if it works!