Not too long ago one of you commented on a blog post I did that discussed Tips On How To Write Blog Posts Effectively (check it out for some awesome tips). I was asked to elaborate on the HTML codes I use on my blog posts. I am happy to oblige because I have a document with all the HTML codes that I use. However, that document is messy so I will be walking through each code I use and in the end, you can grab a nice streamlined, fully customizable blog post HTML template to use on your blog.
How I save so much time and space on my blog using this html code
One thing that I struggled with on my blog was that so much storage space was being used up on my images. I was running out of space fast and I had to put in so much work to make sure I was optimizing my images to perfection so my blog wouldn’t be slow.
I set out to find a solution and with some help from my blogging friends and google, I found a solution.
Before blogging I had never heard the term, and before I mastered it, I didn’t really know much about it. But no worries, I’ve done the leg work so let me catch you up to speed.
What are External Images?
External images simply put are images you can put on your blog posts without storing the image on your blog. You are pulling the image from another site to show up on your blog. You can do this with any site but there are some downsides.
If the image is taken off of the site, it also disappears from your blog! I know, not ideal. But there is a workaround for this.
How I Use External Images To My Advantage On My Blog
Originally, I wanted to store the images on my google drive and then use a link to show it on my blog. This is fairly easy to do but I read that Google frowns upon this and I didn’t want to get in trouble. Google is okay with this if you get a client ID. There are also WordPress plugin’s you can use but they will ask for the client ID.
I found this to be complex for an issue that I felt should be complex. So, I took a different route.
Have you ever heard of Imgur?
Most of you probably have but if you haven’t it is a place where you can store and post images. I use it only for storing images. Before this problem came up, I didn’t use it. Now it is a part of my blogging routine.
What I do is, I save all of my images for my blog on Imgur. Then, I play with the direct links and html code to put it on my blog.
Now, I don’t have to store images on wordpress and that saves on storage space. It is also super easy to use and quick to learn so I save time when I’m writing blog posts.
The bonus is that it’s completely free so I don’t need a plugin, I don’t need any money, I just need the code. And, I have that!
You will too, let’s walk through it together.
HTML Code #1
The first code I am going to walk you through from my blog post HTML template is images, images with links, and pins. You will need the following:
- Imgur account (sign up here, it’s free)
- The ability to copy and paste
- blog post editor open
Use Imgur.com to store all of your images. Pick the image that you want to use and copy the HTML (website/blogs) code. Go to WordPress, paste into a custom HTML block. See the video below for a walkthrough of this first step.
Next, you will want to add some additional coding that will help your blog post look better and improve your SEO ranking.
Padding-This will help so your images aren’t hugging the text. It gives just a little bit of space between the image and text. I use 10px but you can change that to what looks good for you.
Next, you will want to add an alt tag so that search engines know what the picture is about. This can help with SEO if you add your keyword into the alt tag. But don’t do this with every image!
EX. alt=”image description”
You can also put your pin images into the image that shows on your blog. This helps because if someone decides to pin your blog post, the pin image will show up instead of the image that is in the blog post.
EX. data-pin-media=”link to pin image”
Use the code above, but you aren’t finished yet because you have to put the pin image inside the quotation marks. This can be done by going to imgur, selecting the pin image and copying the direct link code. Once you have that, just paste it in between the quotation marks.
Lastly, you will want to align the image around the text if it is a smaller image. You can choose to align it to the left, right, or even center by using the following code.
Watch the walk-through below if you are more of a visual learner!
This step is completely optional! In fact, for this post, I don’t need it, but I will give an example anyways just to show you what it looks like.
In addition to externally adding images, you can also play around with the code a little bit to add links. This works great if you need to add an affiliate link for example.
Watch the walk through below to see how it is done!
HTML Code #2
I am a book blogger so I use star ratings all the time. You can use this for any purpose though! Reviews are the best use for it but it is completely up to.
I have a code that will be available to you via my template at the bottom of this post. Watch the walk through to see how simple it will be for you to use!
You can customize these stars as much as you want. You could change the size or color! I use purple because well, this is the Purple Shelf Club blog! But, it is completely up to you!
HTML Code #3
This code is another one that many book bloggers would probably love. I titled it “Book Review” but you could use it for anything if you don’t blog about books. One example would be if you are a food blogger. You could use an image of a dinner and then put the ingredients next to it. Another example would be if you were reviewing a product instead of a book.
I use to use a plugin for this. However, with that plugin, I had to use images from my WordPress media library. I couldn’t pull from Imgur. So, I figured out a way to get the exact same look through HTML.
Here is how you do it.
You will put an image in, just like you did before, but then you will add in a list code right beneath it. I add a link to the image for this so I will show you exactly how I put all of that together.
If you use my template you can do it the exact same way I do.
First, I copy and paste directly from my messy reference sheet. Then I switch out the image source with the direct link from Imgur of the image I want to use. Then I follow the same steps I showed before to add a link. Lastly, I fill in the information on the book.
Now it’s time to Be A Better Blogger!
So there you have it, that was all of the html codes I use to save space and write blog posts faster. Make it easy on yourself and use these html codes by getting my blog post html template. I promise you will be able to customize it to your needs and it will help you in the long run!
Let’s Talk About It!
This post would not be here if it weren’t for you! Let me know in the comments below if this blog post HTML template walkthrough has helped you and if there is anything else I can help you with!
It has been so great talking to you. If you like what I have to say, you can support me by:
- Subscribing to my newsletter. (P.S. you will get access to my VIP Freebies Vault if you do)
- Buying me a coffee!
- Clicking and buying through my affiliate links. The cost does not change for you, but I do get a small commission from your purchase.
- Leaving a comment below or contacting me via my contact page for any requests or just to talk.
If you are an author, let’s support each other! I have services that I can provide to you via my services page Or, you can contact me here about doing a book review, book cover reveal, book blog tour, and more!Follow my blog with Bloglovin
Hi! I am a book blogger primarily. The aim of this blog is to help readers and writers alike. I also write the occasional travel related post. I am a nerd like you with a passion for neuroscience and learning. Hence, my love for books and the authors who write those books!