Here are five handy pieces of HTML code that I frequently use to customise elements of my websites and generally lift them from whatever standard template or theme I am using. I most often use them in text widgets to manipulate the look of the text being used.
What is HTML?
HTML stands for HyperText Markup Language and it is the primary language used for creating websites – just about everything you see on the internet is built in some fashion around HTML. Knowing a little bit of HTML can be quite useful if you want to make a tweak or two around your website.
All the HTML below require you to put a simple piece of code both before and after the text you want to change. The first bit tells the internet “start this effect now”, while the second piece says “end the effect now”. These codes are always presented inside triangular brackets < like this >.
Adding HTML to Text Widgets
These days I exclusively use WordPress for my websites – it is a simple and intuitive platform that allows me to not worry too much about coding and things that are better left to experts and just get on with content creation. One of the great features of WordPress blogs is the widget areas that allow you to put all kinds of cool bits-and-bobs, such as images, archives or Twitter feeds. The standard Text widget can also be used to do some pretty amazing things, too, as it allows you to use HTML in it. All you have to do is write (or copy) the HTML straight into the content area to create coloured boxes, funky text and all kinds of other effects.
1. Bold, Italic and StrikeThrough text
Making your text bold, italic or
strikethrough is a pretty common feature for text editors and even your blog posts, but the WordPress Text widget doesn’t offer an easy what-you-see-is-what-you-get editor. Luckily, you can use this simple HTML to easily change the look of your text:
To make your text bold, use the <strong> tag before the text you want to bold, then close it with </strong>.
<strong>YOUR TEXT HERE</strong>
To make your text italic, use the <em> tag before the text you want to bold, then close it with </em>.
<em>YOUR TEXT HERE</em>
To make your text strikethrough, use the <del> tag before the text you want to bold, then close it with </del>.
<del>YOUR TEXT HERE</del>
2. Text Colour
You can change the colour of your text, too.
<font color=”#F2930F“>YOUR TEXT HERE</font color>
A couple of things to notice. First of all, HTML uses US spelling, so the word colour is actually spelled “color” – this is pretty important! Secondly, in order to choose the specific colour that will be displayed you will need to know its hexidecimal number (that’s the number in red above). This is 6 letters/numbers that define the specific colour. They are easily found through Google, like this one.
3. Font size
Usually, you are stuck with text all being the same size in your Text widget. However, you can use HTML to change the size of some or all of your text. Font sizes range from 1 to 6 with the typical font size being “3”. You can change the size of the font in the text widget by using the following:
<font size=”4“>YOUR TEXT HERE</font>
Just change the number in red to whatever number you want your font size to be.
4. Highlight text
This effect puts a colour behind the text and makes it look like it has been gone over with a highlighter.
<span style=”background-color:#000000;”>YOUR TEXT HERE</span>
This also requires you to use a colour picker to choose the highlight colour (the bit in red). You might have to play around with both the highlight and font colour to get something that both “pops” and is readable.
5. Widget background colour
Okay, so far we have played around with modifying the actual text of your Text widget. Ready to really dress up your text box? Using the following piece of HTML will let you change the background colour of your Text Widget. You can see this on my blog’s front page, with my subscription box and quarterly goals.
<div style=”background-color:#ffffff“>YOUR TEXT HERE</div>
Just like with your font colour, you will need to use a colour picker to find the hexidecimal number for whatever colour you want to use (that’s the stuff in red again).
Using the above piece of HTML will change the background colour of your widget but you might find the text is a bit too close to the edge of the “box”. If this is the case you need to add a little bit extra to “pad out” the edges before the text starts. This is called padding, and you can use this:
<div style=”background-color:#ffffff;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px“>YOUR TEXT HERE</div>
This is exactly the same as the first bit of HTML, but the stuff in red is the “padding”. The padding is measured in pixels (10px) and you can change how wide it is by changing the “10px” to another number (5px, 20px, whatever).
6. Want to get really tricky?
There is nothing to stop you from combining any or all of the above in a single Text widget. In fact, if you look at the Q2 Goals image above, you can see an example of this. It uses different font colours and sizes, and a background colour for the whole widget. When you are combining multiple pieces of HTML, just remember that they need to be “started” and “finished”. The Q2 Goals text box looks a little bit like this (not exactly, because I have some little pictures and stuff in there which I am not going to worry about):
<strong><font color=”#000000″><font size=”4″>MY Q2 GOALS:</font size></font><strong>
Write at least 3 blog posts a week
Take the kids on a roadtrip
Finish draft of my next book
I have colour coded all the HTML that is “working together” to create effects.
- This HTML gives the entire widget the yellow background colour. Notice that it appears as the very first and very last thing “wrapping” the whole widget up.
- This makes the heading bold.
- This ensures the heading colour is black.
- This makes the header font larger (size “4”).
- This makes the colour of the goals white.
So, there you have it. Five simple HTML tips for bloggers to really make your Text widgets stand out from the crowd. Let me know if you use any of these!