Also known as A Little HTML Code Goes a Long Way.
Anyone remember what blogging was like in the late 90s? I was blogging back then, first on Live Journal and then Blogspot. I tried desperately to customize my own flair on the site but it was just too hard for me at the time. I had to go to a lot of different places to learn how to do basic stuff in WP. Cue May of 2010; the same day I got in on the start up stage at FunCitySocialMedia, the web designer quit. Fred and I looked at each other and I said “I’ll do it.” And you can do it too.
We’re going to add and link an image in your side bar. Thinking into the future (near or far, depending where you are on this blogging journey), you’ll get advertisers who will supply you with banner artwork that you will need to learn to upload. Let’s assume you have an advertiser for this exercise.
Locate the image on your hard drive. Depending on the terms, we recommend that you change the name of the image to include your own SEO keywords as well as your advertiser’s. They also will have supplied you with the link that sends visitors back to their site. CHECK THAT IT WORKS before you start coding, just to save yourself some steps.
This process below is a bit easier in the resize stage if the image is a square. For practice sake, feel free to download this image and link with the source code provided. Plus I get link juice out of it. Woo hoo!
Step #1: Go to your widget section.
- On the left hand side, choose Appearance
- Click on Widgets.
- Find your sidebar section where you want your image to appear.
- Pull over a text widget to that section.
- Place code [as mentioned in the Source Code section below]
Watch the video below for a visual step by step.
Here is the Source Code.
<center><a href=”https://www.iteachblogging.com/upcoming-classes/”><img title=”Click for Blogging Classes Schedule” src=”https://www.iteachblogging.com/wp-content/uploads/2013/08/Learn-to-Blog.jpg” alt=”Blogging Classes Schedule” width=”300″ height=”300″ /></a></center>
Now let’s dissect some of this.
<center>
If you want your image to be centered you have to add center commands at the beginning and the end. Inside of a post box, all that you have to do is hit the center button but on the sidebars it is a bit more complicated.
<a href=”https://www.iteachblogging.com/upcoming-classes/”>
This piece of code tells your image where to link to. If you do not require a link, then just leave this piece out. However, note that you will want to remove the “/a>” at the end if not linking.
<img title=”Click for Blogging Classes Schedule” src=”https://www.iteachblogging.com/wp-content/uploads/2013/08/Learn-to-Blog.jpg” alt=”Blogging Classes Schedule” width=”300″ height=”300″ /a>
This piece of code is a bit more complicated so we are going to break it down a bit further.
<img title=”Click for Blogging Classes Schedule”
This is the text that people will see when they hover over the image. See image below:
Tip: The first purpose of this image title is to provide guidance to the reader, you are telling them why they should click. This is also an opportunity to place a keyword but the keyword must add value and make sense.
src=”https://www.iteachblogging.com/wp-content/uploads/2013/08/Learn-to-Blog.jpg”
This is where you put the link to your image. It is always best if you link to an image that you are hosting. So upload the image to your media library. You will find the link from there.
alt=”Blogging Classes Schedule”
The alt text is what the search engines look at to figure out what the image is about and why it’s there. In this instance I have made the decision to link the image to my blogging class page so I put relevant text. This is a great opportunity for SEO. The word “blogging” is a rich SEO keyword and I also know that people are searching for blogging classes. This is the right key phrase for me and I would recommend that you do some research to find the right keyword for you.
width=”300″ height=”300″
The width and height commands are not absolutely necessary here. If your image is the perfect size then you can leave it out. If you need to resize your image then you can do that with the html code here. It is far easier to resize a square image than it is to resize a rectangle image. This has nothing to do with the code but rather about fiddling with scale. For example, if I have an image that sizes at 300 px by 525 px I do not know off of the top of my head what it should be if I really just want it to be 200px wide. I would have to open it up in some type of photo manipulation tool and figure it out or do some math.
There are a lot of resources online to help you resize your image. Here are a couple to try:
http://www.resizeyourimage.com/
Forward slash & close gator: />
This closes the loop on your html image code. So just to show you again: <img title=”Click for Blogging Classes Schedule” src=”https://www.iteachblogging.com/wp-content/uploads/2013/08/Learn-to-Blog.jpg” alt=”Blogging Classes Schedule” width=”300″ height=”300″ />
NOTE: If your image does not show up, verify that you have the double quote marks at the beginning of the http and after your .jpg or .png. I tend to delete these by mistake when inserting a piece of image code.
</a>
It is crucial that you remember this “close a” because if you don’t then everything underneath it in your sidebar will be a link. The html does not know when to end the link so everything becomes a link. It is an easy piece of code to forget and it can be frustrating when you realize that you have 15 images linking out.
</center>
Note: If you put a command in html such as center it needs to be ended. So as you are seeing in this code dissection, we end the link command with </a> and the center command with </center>
This is a fairly simple piece of html code but it does require that you pay close attention to all of the details. Don’t forget to hit Save Draft as you go. My advice to you is to copy the code from this post and save it in your Evernote. In mine, I have a folder called Code and it has tons of little pieces of code that I use over and over again.
Did this work for you? Let me know if one of these steps needs to be clarified or if you have suggestions for making the process simpler.