Using Simple HTML in Your Blog Sidebar

A lot of people flinch when they hear the word “code”. Images of numbers, letters and characters swim in complicated patterns and most of us just want to curl up and say, “FORGET IT!” But there are times when understanding a little bit of code is helpful.

If you are a beginner, the easiest to start with is HTML. The official definition of HTML is:

Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

Even if you have a professional design your blog, there are times when you need HTML. For example you may want,

1. To paste a button on your sidebar
2. To add social media buttons to your sidebar
3. To add a signature to the bottom of your posts
4. To customize a footer
5. To create formatted text in a widget on the sidebar
6. To place advertisements in various widgets on your blog

There are many many other uses for HTML, but these are the most common reasons a beginner might come into contact with code. Here is the most basic rule for HTML.

Every HTML rule opens with a less than sign, like this: < your stuff >

Every HTML rule closes with the same sign but with a slash, like this: </ your stuff >

The end tag tells the page when to stop applying the formatting. Without the end tag, the webpage doesn’t know what part of the text to format.

You probably will use the following tags most often:

<p> This is the tag that opens a paragraph </p>

<br>This is the tag that forces a space (called a break) </br>

<a href= >This is the tag to create a link </a>

<img src= > This is the tag to display an image </img>

<div > This is the division tag and defines a section of your text or html document </div>

Here are some common uses for HTML that even beginners can learn.

If you want to center a button or advertisement in a widget…

Let’s say you get some code for a blog hop, an advertisement, or a badge. When you stick the code into your post or text widget, it isn’t aligned properly. For this problem, you will use the <div tag. You can also do this in your post, if your images or text are misbehaving. If you are in a post, click on the text  tab and find the place where your text is. Add the code on the front and end of the item you wanted centered. If you are in a widget, just place the <div tag at the beginning and end of the code.

If you want to create a link…

If you want to create a word that links to another page, post or website, you can write HTML very easily. This may come in handy if you are working in a widget. Usually when you are writing a post, you just have to hit the chain link button and it will automatically create the link for you. But in a widget, it has to be done manually. For this, we will use the <a tag. Don’t forget the space between the a and href!

If you want to put an image onto your blog…

If you’d like to add an image somewhere (on the footer or sidebar) where there is no visual way to upload it, here are the steps you take.

1. Go to your dashboard and hover over media. Click add new.

2. Upload the image. This will put your image on your server and then spit out a URL for referencing that image.

3. Click on edit (once the image has uploaded) and copy the LINK URL that is on the right hand side of the image. (It’ll look something like http://www.yourwebsite.com/wp-uploads/08/2013/image.jpg).

4. Go to a text widget or anywhere that reads HTML and write the following code. For this, we’ll use the <img tag.

5. If you’d like to center the image, just simply add a <div align=”center”> in front of the code and then </div> on the end.

If you want your image to be linked…

You just need a few extra pieces of code in order to make this work. Above, you learned how to create a text link and add an image. Putting these two principles together is necessary if you wanted to put up something like social media follow buttons. You want to have the <div tag first (to align it), then the <a tag, which tells it where to link to, and finally the <img tag to reference the image.

Here’s a secret!

Let’s say you have some text you want to put into a text widget, but you want it formatted with a certain color and make it bold. If you are intimidated about writing code, go into your dashboard and click on posts. Click add new. Type out what you’d like (and even add an image if you want). Get it looking just the way you want it to, then click on the text tab when you’re done and grab all the html code from the beginning to the end. Paste that into the widget and it will be coded properly!

 Some other easy HTML formatting tricks…

• If you need an extra space, just add a <br></br> tag. The BR stands for break.
• If you want to make something bold, add the tag <strong> before the word and </strong> after.
• If you want to format text to a certain heading style just add the <h1> (or 2, 3, 4, 5, or 6) and then the </h1> at the end.
• A lot of bloggers use a button or badge on their sidebar. An easy way to generate the code for that is to use the GRAB my button code generator. You may notice some tags that look familiar. Look for the <div tag and the <a href tag.

Your homework assignment…

Drag a text widget onto your sidebar and write a short about me bio for visitors. Try linking one of the words so it goes to your official About Me page. If you want it to be a different color, try writing it out in a post and grabbing the code. Let me know in the comments how it went!