These 6 essential HTML codes for bloggers will make your blogging life easier. Check out the codes and the features they offer. And get your free cheat sheet!
WordPress is the ultimate platform where bloggers can unleash all their creativity.
In fact, I believe it is one of the most customizable platforms for websites out there.
I mean, like really… you own the whole thing.
Ps. Check out this step-by-step tutorial on starting your own WordPress blog using Siteground!
But since it is so customizable, it can also be difficult to understand.
Don’t worry, as time goes by, you’ll get used to it.
And to get you started, you can read this post where I explain the WordPress Editors.
In that post, I show you the features of both the visual and text editors.
With that tutorial, you will learn how to link in a post and how to edit a post using several listed features.
Today, I am sharing with you 6 HTML codes for bloggers that are either not a feature of the editors, or that can be used in other ways.
These 6 codes are essential in our busy, custom-looking, and somewhat cutthroat business we love, called blogging.
PROTIP: Please note that for these codes to function properly in a post, you need to add them in the TEXT editor. Not the visual editor.
6 HTML Codes For Bloggers!
<center>Write your text here </center>
Now, this IS a feature of the WordPress editor. But it comes in handy in so many other situations that, I couldn’t possibly leave it out.
For example, I use this code a lot in text widgets. If you want to align something in a widget, this is the way to go.
2. Hide Images
<div style=”display: none;”>IMAGE CODE</div>
This code is used to hide images in your post.
Now you may be asking: ‘Why would I want to add images in a post just to hide them?’
If you’re on Pinterest, chances are you create multiple graphics for each post.
Learn how to create awesome Pinterest graphics here!
Instead of adding them all to your post, effectively crowding it, I like to make 1 visible and hide the others.
That way when you press the Pinterest sharing button on my post, 3 Pinterest graphics will pop up.
For example, up in the top of this post, you will only find 1 Pinterest image. But if you press this button:
2 other Pinterest graphics will pop up. Like this:
Hey, why don’t you share it while you’re there 😉
Now, I suggest you add the images in your post as you normally would in the visual editor.
Place them in the bottom of your post, so they’re easy to find.
Switch to the text editor, scroll down to the image codes that should look something like this:
<img class=”aligncenter ” src=”IMAGEURL” alt=”ALT TEXT” width=”735″ height=”1102″ />
And then add the code like this:
<div style=”display: none;”>< img class=”aligncenter ” src=”IMAGEURL” alt=”ALT TEXT” width=”735″ height=”1102″ /></div>
Switch back to your visual editor, and you images should be gone. Then make sure they pop up in your sharing screen.
3. No Follow
This code is more of a MUST than a feature. A no follow tag alerts Google not to index the link.
You add the no follow tag; when it’s a sponsored/affiliate link, when it’s a ‘sign-in’ link or when the link goes to untrusted content.
You need to add the no follow tag in the above situations, because Google might penalize you, SEO-wise, if you don’t.
You can add the no follow link manually, or install a plugin that gives you the option of making a link a no-follow.
But, even if you have a plugin, there are times where you will need to add the no follow tag manually. One example is when adding an affiliate banner to your post.
To add no follow to link manually:
This is your link: <a href=”http://www.AffiliateURL.com”>My Text</a>
Add the tag like this: <a href=”http://www.AffiliateURL.com” rel=”nofollow”>My Text</a>
4. Pinterest Widget
If you have a Pinterest account for your blog, you can add a Pinterest Widget on the side to prompt people to follow you.
To create you custom Pinterest widget, go to this page.
There you can build your widget.
Then at the end of the page, you will find your widget code that you need to add in the; Dashboard>Appearance>Widgets>Text widget.
Then you have another code that you need to add before the closing of the body tag.
5. Fine Print
Have you ever wondered how you can add fine print to your post, like when you want to add a disclosure?
I use 2 different methods to do this.
Method 1– Using the Easy Google Fonts plugin, I have customized my header 6 to be bold and in a smaller size.
So when I want to insert bold fine print easily, I just add the <h6> tag.
Method 2 – You can just add the <small> tag, as in <small>TEXT</small>
And, if you also want the text to be bold; <strong><small>TEXT</small></strong>
6. Showing Code In Your Blog Post
If you’ve ever tried to show a code in your blog post, I mean, if you want people to actually SEE how a code is written, like you have in this post, you need to tweak your code a little.
For example, you want to showcase this code: <small>TEXT</small>
You need to change all the [ > ] symbol into [ > ] and the [ < ] symbol into [ < ]. Leave the [ / ] there.
Ps. Don’t include the square brackets!
There you have it, 6 easy yet essential HTML codes for bloggers.
With these simple codes, you can add extra features, improve your ranking and customize your blog.
Now, that’s what I call an improvement!
PS. Sign up below to get the free HTML Codes Cheat Sheet!
Get Your Codes Cheat Sheet
Sign up here to receive your HTML Codes Cheat Sheet today!
*If you’re going to use links from this post, make sure you paste them in a notepad page before you use them! This way you will remove any extra code that web text has.
What do you think of these HTML codes for bloggers? Do you use any other codes that bloggers should use/know about? Have you tried any of the above? How did it go? Share with us in the comments!