Easy HTML Codes For Bloggers

For any blogger, it’s inevitable you will run into HTML coding. It may sound scary, maybe a little confusing, but it’s one of those things that will be super helpful to you if you can memorise the basics. I wanted to share easy HTML codes for bloggers.

HTML is the language used to create web pages. A blog’s template/theme is made up by a whole page of HTML coding, from the top to the bottom. If you want more control over what you add to your blog and where you want it to be, learning a few basic HTML codes is the best idea.

In Blogger, you may have seen the “HTML/Javascript” option when adding gadgets to your blog. This type of gadget is the one you need to select if you want to add a HTML code to your side bar or footer. If you’re on WordPress, a Text widget will do the same thing.

Create a new practise gadget in your side bar so you can try some of the following codes out and see what happens. If you put the coding in wrong, don’t worry. Either it won’t show up at all or you’ll just have little – / = . / symbols floating around your side bar until you delete it. You really can’t go wrong with practising 🙂

IMAGE

Before I had a self-hosted WordPress blog which allowed me to upload images to my own hosting, I would upload my images to PostImage to get the direct link for my html codes. I was a little bit trusting, as the site can go down at any time and leave me with broken images everywhere, but I just couldn’t be bothered paying for image hosting when a site can host them for me for free 🙂

Upload your image to PostImage, Tinypic or Photobucket and grab the ‘direct link’ provided. Then simply paste it into this code:

<img src="https://imagelinkhere">

IMAGE LINK

This is the code you need if you want to add an image to your side bar which is linked to another page or website. Always make sure your links in coding start with the http://

<a href="http://websitelinkhere"><img src="https://imagelinkhere"></a>

TEXT LINK

A text link is just like the code above, but with text where the image code was.

<a href="http://websitelinkhere">Text Goes Here</a>

BOLD, ITALIC & UNDERLINED TEXT

You can change the look of text in your side bar with these easy codes:

For bold text:

<b>Bold text here</b>

For italic text:

<i>Italic text here</i>

For underlined text:

<u>Underlined text here</u>

FONT SIZE

You can also change the size of your font. Replace the number with a number between 1 and 6 (1 is super tiny and 6 is quite large):

<font size="4">Text goes here</font>

STARTING A NEW LINE

If you don’t use this little break code, everything will end up in one straight line. One of these will start a new line, two will start a new paragraph:

<br>

ALIGNING IN THE CENTER

If you want to align anything in the center, whether it’s writing or an image (you can even use this code at the start and end of another code), use:

<center>anything you want centered here</center>

Get the hang of these codes and you’ll be able to add whatever you like to your side bar or footer 🙂 Have a practise and let me know how you go!