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.
How To Change the Images on Your Blog
So you’ve found this great blog template. It’s the perfect theme for you….except the pictures won’t work with what you have in mind. If you could only change a few of the images this template would be awesome! Well fear no more because with just a few quick and easy modifications, you can change the images on your blog to be the exact images of your choice.
This tutorial will show you how to replace existing images on your blog with new images.
Requirements:
- Access to the admin area of your blog
- FTP access/ability
- NoteTab or NotePad
I will assume that you know how to navigate within your blog admin area, and that you know how to use your FTP software to upload data to your server.
Let’s get started!
Images for your blog theme are usually stored with this path http://myblog.com/wp-content/themes/mytheme/images/
Fire up your FTP software and connect to your server, follow the above path with your FTP program and download all of the images to a folder on your computer.
Open the folder on your computer that you just downloaded the images to. You may have to change the view of the folder in order to see thumbnails of the actual images. Find the image that you want to change. Hoover your mouse over the image until you see a little text image pop up.
Notice the dimension on the pop up box. That’s the size of the image that you need to replace. You need to find another image that is 139 width and 139 height in pixels. Replacing an existing image with another that is the same size will prevent you from going through the process of modifying the code.
You can search the internet for free photos, or go to websites like BigStockPhoto or IStockPhoto to purchase images. I have found that I do better on the paid sites. I’ve found a few freebie images to use in the past, but they really weren’t of the quality that I needed.
If you can’t find an image that exact size, find one that is slightly bigger and resize it. Open up your favorite photo editor and resize it to the dimension you need.
Now, all you have to do is give the new image the same name as the old image, FTP the new image up to your server which will replace the old image (select YES if the program asks you do you want to replace the file).
Voila! It’s done!
Go to your web browser and refresh the page and you will see the new image. You can repeat this as many times as you want on as many images as you like. That’s the quick and easy way to change images on your blog.
Note: This process can be used for your website too. All you have to do is locate where your images are stored and follow the same procedures.
More related sites:
| Learn how to insert an image in sidebar on your blog at Blogger … – Tutorial for beginners: A few steps with screenshots in this post will help you learn how to insert and position an image in the sidebar at your blog on Blogger/Blogspot.
WordPress 2.5+ Tutorial – How to Upload and Insert an Image … – mcbuzzvideo asked: This beginner-level tutorial shows how to insert an image using WordPress version 2.5 or later. Inserting an image using WordPress version. |
