Quick HTML Reference Guide To Inserting Images In Your Sidebar
I have seen some confusion over how to insert images into the sidebar of a blog. You can insert images by either hard coding a widget, or using your widget ready theme. After working with both types, I have found that the hard coding works best for me and the themes that I have been using. Some themes work great with widgets. You will just have to experiment to see which is best for you.
I am not going to explain in detail the instructions behind why you need each type of code, but rather just give you what you need to accomplish the task.
The html codes that are needed vary depending on what you want to accomplish. Below is a quick basic guide to show you some of the codes to add images. There are color coded instructions to help you follow along. These codes can be use to add images to a blog sidebar or website.
<img src=”http://mydomain.com/image.jpg” alt=”image_name” width=”000″ height=”000″ />
The above is the basic code to insert an image, and you will only have a display of the image, nothing else. From here is where everything else is built upon. You will just be adding more code to customize the image.
Replace this with the full URL link to your image. This code is in place in case the image is not rendered in a browser. The words that are used within the quotation marks will display instead. Give it a good name that represents what the image is or what the subject matter is about. First, determine the size of your image, and then replace “000″ with the correct width and height with that of your image.
<a href=”http://AnotherDomain.com” target=”_blank”><img src=”http://mydomain.com/image.jpg” alt=”image_name” width=”000″ height=”000″></a>
This is the code to add a hyperlink to an image so that when you click on it you are directed to another URL. As stated earlier, we are still using the basic code and just adding another code for hyperlinking:
Replace this with the full URL to where you want people to land once they click on the image. This code changes slightly from the basic code shown above, so copy this as is and then make your modifications. The code target=”_blank” instructs the link to open in a new window. If you want it to open in the same window change the code to target=”_self”.
<a href=”http://AnotherDomain.com” target=”_blank”><img src=”http://mydomain.com/image.jpg” alt=”image_name” width=”000″ height=”000″>I can put my text here</a>
Here’s the code to add text to image. The text will display based on the alignment of the image (see the next section for more info). Notice that the text is simply added at the end between > < .
Replace this with any text you like.
<a href=”http://AnotherDomain.com” target=”_blank”><img alt=”image_name.png” border=”1″ align=”left” height=”000″ width=”000″ src=”http://mydomain.com/image.jpg” /></a>
From this point forward, you can include more customization by adding codes directly after the image URL.
For example, to add a border or change alignment of an image:
If you don’t want a border change value to “0″, or to increase the size change the value in increments to see how you like it (i.e. 1, 2, 3 etc.).
If you want to change text alignment you can try these other values: bottom, middle, right & top.
For your blog, the best way to understand all of this is to create a test blog to play around with these codes. I don’t make any changes to my blog if I am not certain what will happen. When you are testing code sometimes the darnest things can happen. Let those darnest things happen on your test blog and not out in the open for your visitors to see.
You can do the same thing with your website by testing in your wysiwyg editor.
Insert An Image In Your Sidebar By Using A Widget
Inserting an image in your blog is really easy especially if you use widgets. Widgets are accessories for your sidebar that make it easy to add things like images, content, plugins, etc., and get this….all without knowing any html. Can’t get any better than that right?
Adding one of these to your blog will only work if the blog theme you selected is widget ready. If not then you will need to know some html/css. That’s why if you’re just starting off you need to make sure that your blog is widget ready.
Okay, I am going to show you how to do this with Wordpress 2.7, however it’s pretty much the same process for the older widget ready versions.
| Step 1. First you will need to login to your admin area, look for Appearance and then select Widgets.
(Click image to enlarge)
|
| Step 2. Then, click the Add button to add the widget to the sidebar. Make sure that if you have more than one sidebar, that you select the correct sidebar to add the widget to.
(Click image to enlarge)
|
| Step 3. This is what a an added widget looks like in the sidebar. (Click image to enlarge)
|
| Step 4. (1) Copy and paste the code for your image in the box…the title is optional. (2) click Done and (3) click Save Changes. (Click image to enlarge)
|
Now all you have to do is view your site and the images should be in your sidebar. That is if you have (A) provided the correct URL to the image, and (B) have properly saved your changes to the widget.
As an added note, regarding image 3, if you have a number of widgets in your sidebar, you can drag and drop them to rearrange their positions in your sidebar.
