10 Basic HTML Codes For Bloggers

 

Are you a blogger who gets a little nervous at the thought of manually editing your blog’s HTML?  If so, don't be. HTML can look quite scary when you first take a look at it, but you don't need to be a coding genius to achieve a few basic blog enhancements with the help of some common easy to use html tags. 

Here are 10 of my most frequently used HTML tags, that you might just find useful..

1. LINE BREAKS:

<br>

Probably the most commonly used by myself. <br> will break the line up like this. (It's the same as return). I use it a lot for my blog layout side bars to separate images. 

2. MAIL TO:

<a href="mailto:YOUR@EMAIL.com?Subject=TYPE SUBJECT HERE" target="_top">Send Mail</a>

I use this HTML code here half way down. It's so that people can click on your link and it will automatically open up their mail account with your email and chosen subject title already in. 

3. GET YOUR IMAGES TO LINK TO A WEBPAGE: 

<a href="http://www.URL.com"><img src="http://IMAGE-URL.com/"></a>

This will add a link to an image, so that when people click the image it will redirect them to the page you wish for them to land on. There are lots of examples of this in my side bars. I create images using PicMonkey then use this code to link them to pages within my blog. 

4. FORMATTING FONTS: 

<b> Will make the text bold 

<i> Will turn the text into italic

<u> Will underline the text

Once you have targeted and changed the word or words you wish to format then you will need to close that HTML tag off like this: </b> </i> </u> (whichever is applicable).

5. NO-FOLLOW LINKS:

<a href=”WEBSITE-URL” rel=”nofollow”>YOUR LINK TEXT</a>

If you wanted to know the HTML for no-follow links, it is as above. If you use blogger to blog - when you click the link button to create your link there's an option to make link no-follow there. 

6. DONT ALLOW 'PINS' OF YOUR IMAGE: 

<img src=”IMAGE URL” nopin=”nopin”>

You can use this HTML tag to protect images of your family etc if you don't want them ending up on Pinterest. You'll just need a Image URL. (You can upload images to photobucket, imgur, etc to get an image URL). 

7. RESIZE IMAGES:

 <img src="ENTER IMAGE URL.GIF" alt="IMAGE INFO" height="200" width="200">

You can change the size of images with the above tag, just change it where applicable. To change the height and width, simply enter higher or lower digits where the 200 is. If you want to resize it by half it would be height="100" width= "100". 

8. ALIGN TEXT TO CENTER:

 <center>TEXT HERE</center>

It's pretty easy to align text in Blogger as there's a one click button that allows you to do so on the composing page. But I use this code on my side bars to keep my side bar widgets centered. For example, take a look at the text underneath my profile picture on the top left, it's all centered because I used this HTML tag. Don't forget to close your HTML tags with a (/). And remember you don't need to have all of your text/images centered if you don't want that, just use the tag on the image or word you want to be and then close it off.

9. HEADINGS:

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading <h6> defines the least important heading

Headings are important as search engines use your headings to index the content of your site. H1 headings should be used as main headings, followed by H2 headings and so on (if required).

10. MANUALLY CHANGE FONT COLOUR:

<font color="#ffffff">TEXT HERE</font>

You can manually change the colour of your font with the above code. Just pick whichever colour you would like using a colour chart such as this one (click the colour and the code for it will show underneath) and then replace the ffffff in the code.

These are just a few very simple HTML codes that are probably most frequently used by bloggers. You can edit your blog posts HTML by clicking 'HTML' which is next to the 'Compose' button on Blogger's compose page.

************

I hope this has been of some help. Please feel free to bookmark the page so that you can easily return when you need a code. :)

  Subscribe to Bump To Baby by Email