Friday, September 29, 2006

How to put pictures in the sidebar

(Note: This post was prepared for the old classic Blogger template. See bottom of post for update on New Blogger templates)

Putting images in the sidebar can be dicey. You have to make sure the width of the image fits the width of the sidebar. If it is too wide, it will cause the sidebar to slid to the bottom of the page.

This is how I do it. First, I check the width of the sidebar of my blog. I do this by signing into Dashboard, selecting the blog, clicking the TEMPLATE tab to open the template editor, then I search for this block of codes (click on screenshot to enlarge it):
Blogger template: sidebar width
Note the code boxed in red. It says the sidebar is 220 pixels wide. I then have to make sure that whatever images I upload to the sidebar has width less than 220 pixels.

I use the free and very good Irfanview program. I open the image I want to upload with Irfanview. Then in the menu bar, I click Image > Resize/Resample and look for "width" (See screenshot below. Click screenshot to enlarge):
Irfanview, resize
Note that the width of the image is greater than 220 and if you upload this image as it is, it will cause problem with the sidebar. Change the width to something less than 220. For my example, I changed it to 200. Make sure the "Preserve aspect ratio" is checked, otherwise your image will be distorted. Save the image.

Upload the picture to the web. You can either use Blogger or an external photo host like photobucket. If you want to use Blogger, refer to this post: Tip - getting Blogger to host your images for the profile, etc..

Now get back to your template editor. For images to be in the sidebar, the HTML for the image have to be typed between

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<!-- End #sidebar -->

For a guide as to where to paste the HTML, refer to post Blogger template tutorial - adding content via the template

The image HTML that you have to add will be like this:

<img src="URL of photo" alt=""> (It will be good to add a description of your image in between "" in alt="" as if the photo cannot be displayed, the text will be displayed instead, and it will be good for your search engine ranking.) IMPORTANT NOTE: Make sure you are in the INSERT mode when you do this, as otherwise, part of the HTML will be overwritten. It may be a good idea to open Notetab and test if you are in the INSERT mode before you start adding text in the alt="" attribute.

If you want your image to be a link to another site on the web, your HTML will become:

<a href="URL of target site"><img src="URL of photo" alt=""></a>

If you want to see an example of an image added to the sidebar, surf over to Picture Store. The image is at the top of the sidebar and has been made a hyperlink. Try clicking on the image and see what happens.

images with a title

A reader asked in the comments section how to make an image with a title above it. So I am going to post here an image with a title, and the HTML used to display the image. I am using Blogger to host the photos. (See Getting Blogger to host your images. The original photo is 550x370 pixels in size. If uploaded in the manner described in this section, the photo will be too wide as the template says the width of the main column is only 410 pixels wide, and will cause the sidebar to slide down to the bottom of the page in Internet Explorer. Using Irfanview, I resize the photo to 400. I then uploaded the photo to a blog specially created to store images: Citrawarna or Colors of Malaysia. At the post, I click on the photos and that take me to a page with only the image. I copied the URL and then used the URL for the HTML for the image below:

Citrawarna or Colors of Malaysia

Citrawarna or Colors of Malaysia

The image above is displayed by this HTML:

<h3>Citrawarna or Colors of Malaysia</h3>
<img src="" alt="Citrawarna or Colors of Malaysia">

Note that this is putting the picture in the post itself, but you will use the same method described above to put it into the sidebar.

Update 4 September 2007: This post is for old classic Blogger template. If you are using the New Blogger template, refer to Put picture in the sidebar and Easy way to add picture to sidebar for New Blogger


Wednesday, September 27, 2006

Editing or creating a link list in the blog sidebar

Although I have published posts on how to edit or create link lists in the sidebar, some readers are still having problems. Two readers have contacted me to help them do it step-by-step. So, I thought since this is not difficult, I will do it.

If you use a standard Blogger template, most likely you will have this ready made link list in the sidebar, as shown in the screenshot below:
link list

This link list is caused to be displayed by an <img> tag. You can look for it in the blog template by signing into Dashboard, selecting the blog, click the TEMPLATE tab, and the template editor will open. Below is a screenshot of a part of the template where the <img> tag is located:
link list in Blogger templateIt would be towards the end of the template. The HTML circled in red is the HTML which cause the link list in the first screenshot to be displayed. This is the HTML you are supposed to edit.

Let's say, you want to link to 3 blogs with the following URL's

<a href="">Natural Remedies</a>
<a href="">Enviroman Says</a>
<a href="">Guide to Malaysia</a>

you would have to edit the HTML circled in red in the template so that they become

<h2 class="sidebar-title">Links</h2>
<li><a href="">Natural Remedies</a></li>
<li><a href="">Enviroman Says</a></li>
<li><a href="">Guide to Malaysia</a></li>

If you wish, you may even change the title Links to something else, like for example My Favourite Sites, so the first line of the above codes become

<h2 class="sidebar-title">My Favourite Sites</h2>


Moving a blogspot blog to own domain

Some people are no longer happy having their blog as a sub-domain on, and want to have their own domain. What are the possible problems.

Well, the first thing to consider is that when you do that, your original blogspot will become available and the address may be taken by spamblog and may no longer be available to you. Worst still, you may find embarrassing content placed on the old site such as porn, and this can be really embarrassing especially if you have given your old blogspot address to relatives, friends, associates. If you do that, immediately try to claim the old blogspot address to prevent others from doing so. If you succeed in doing this, not only will you save yourself from embarrassment, but you can also do a redirect to your new site. See How to redirect from old URL to new URL


Tuesday, September 26, 2006

How to make links open in new windows

Someone asked this question "How to make links open in new windows" in the comments section of this post Does making links open in new windows piss you off?. I thought it a good idea to answer in a post to make it available to more readers.

To make a hyperlink open in a new window, type it this way:
<a href="URL" target="_blank">Description</a>


Monday, September 25, 2006

Poll: Does making links open in new windows piss you off?


I came across this article Blog design tips - more questions and answers which says that forcing links to open in new windows is bad design, piss your readers off, eats up the computer resources of the readers and discourage readers from returning to the blog.

I make most of the links in my blog open up in a new window, and am wondering if this is doing me a disservice. I have always thought that that is a good idea to keep readers on my page, as each time they click on a link and a new window open, they can always return to the blog by closing that window rather than using the back button. However, I would like to know what the readers think. So if you have an opinion, it will be greatly appreciated if you will leave your views in the comments section. Thanks.

Note: A commentor asked: "How to make links open in new windows?" For the answer, look at post How to make links open in new windows (click "BACK" button to get back to this page).


Friday, September 22, 2006

How to get indexed by Google and othe search engines

This question have been often asked by impatient bloggers on forums. Well, if you are patient, nowadays, you don't need to do anything, and your blog will eventually be indexed by Google and other search engines. However, it may take some time. If you are impatient, perhaps there are various things you can do.

The best thing you can do is to get inbound links from sites that have already been indexed by the search engines. Then when spider go to that site to crawl the site, it will come across you link and will go to you site to crawl it too. This will also do you good as having links to your sites will increase seaarch engine ranking. However, this is easier said than done unless you have your own site which has already been indexed. If you have no one to turn to to ask for inbound links, perhaps you can try to search for similar sites and offer to exchange links. For such purposes, it will be advantages to know the PageRank of the sites. See this post on how you can easily find the PageRank of your own site and any other sites: How to get the PageRank of your and other sites. (close the new window to get back to this page). Other ways to get links is to submit to blog directories.

Submit site to Directories

You can also submit your site to blog or other directories to get inbound links. To make your task easier, it is good to carefully prepare in advance title and a short description of your blog which you can use for all the directories, otherwise you will have to type it each time you try to submit your blog to a directory.

The best directory to get listed on is the Open Directory. To submit your site to Open Directory, go to How to suggest a site to the Open Directory. (Close the new window to get back to this page). Google, and many other search engines, uses the data of the Open Directory Project. In fact, Google Directory is taken from DMOZ, so if you get listed in DMOZ, your site is also listed in Google Directory. This means your site will have 2 high PageRank and authoritative site. However, it is VERY hard to get into the Open Directory. This blog got listed in DMOZ. You can read about it here: DMOZ, the most important directory, and Blogger Tips and Tricks got listed without even submitting (click BACK button to get back to this page).

It is easier to submit your blog to blog directories. There are many blog directories. Here are some blog directories:

(Close new windows to get back to this page)
Blog Catalog
Globe of Blogs
Blog Universe

There are many other blog directories. When I have the time, I will compile them into a post and put a link here.

Submit URL to search engines

You can also submit your URL to search engines, but I hear they may not help much. Anyway, here are the links to the sites where you can submit your URL to search engines:
Submit your URL to Google
ExactSeek - Add your URl
Submit URL to Yahoo
MSN URL Submission

Add a Google Sitemap to your blog

Some are of the opinion that adding a Google sitemap will help your blog get indexed faster. In any case, adding a Google Sitemap to your blog has its advantages. It will make it easier for the spider to crawl your site. To get instruction on how to add a Google Sitemap to your blog, go to Adding a Google Sitemap to your blog. (Close the new window to get back to this page)


Sunday, September 10, 2006

Uploading and manipulating photos on Blogger (and Blogger Beta)

There is no difference in the way in which photos can be uploaded to posts and manipulated in Blogger classic and Blogger Beta, so one post will do for all.

uploading photos

First the basic. To upload a photo, sign into Dashboard, select the blog, click the POSTING tab and select either NEW POST or EDIT POST. Then in the post editor, look for the "uploading photo" icon in the toolbar (See screenshot below)
icon for uploading photo in Blogger
Then click "Browse" (Choose in Blogger Beta) and look for the photo file in your computer. Open that one then select whether you want the photo to be to the none, left, right or center of your post. If you select left or right, you will have less control over how the text and the photo in the post will be displayed. You may see it displayed in one way in the preview, but when you publish it, it may appear different. Choosing center will give a better control over the connection between text and image. Selecting NONE will enable you to paste your photo in whichever part of the post, even in the middle of a sentence in a text. Look at the image of Highlight icon in this post What is FireFox and why you should be using it. The small image (of the tip of a highlight pen) is displayed in the middle of a sentence near the bottom of the post.

If you want the image to be displayed to the left or to the right of the post, it is best to select "small", then after uploading the image, cut and paste the image HTML immediately before a paragraph, like the photos you see in this post: Penang: Places of interest. You will have better control of how your text and image appear together. Pasting the image HTML in the middle of a paragraph.

Then select whether you want the photo to appear small, medium or large, and finally click "upload image".

What you will then see will depend on whether you are in the EDIT HTML mode or COMPOSE mode of the post editor:
Whichever mode you are in, you will see the "photo" at the very top of the post. If you are in the COMPOSE mode, you will see the actual photo, but if you are in the EDIT HTML MODE, you will see the HTML for the photo, which will appear something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="
upload%20photo.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="
upload%20photo.jpg" border="0" alt="" /></a>

Note: At the bottom of the code, you will see this alt="". It is good to fill in the space between the quotation mark with a description of the photo. This is both for the purpose of those who for some reasons are unable to see the photo, who will then see the alternate text, and for the search engines which do not see the photo, but read the alt"" text. Important. You need to ensure that you are in the INSERT mode when you do this, otherwise, you will overwrite part of the HTML. It may be a good idea to open Notepad and test this first.

Manipulating the photos

To move the photos, there are 2 ways. If you are in the COMPOSE mode, you just grab the photo with your mouse and drag it to where you want it to be. If the position is way down the post, you may have to do this a couple of time. In the EDIT HTML mode, it is easier. All you have to do is to highlight the HTML code for the photo, right-click, select cut, and paste it where you want the photo to appear in your post.

In the COMPOSE mode, you can also manipulate the size of the photo. Just grab the corner of the photo and drag it till you get the size you want. You may also grab and drag the side of the photo, but the aspect ratio will not be preserved.

Problems uploading photos

Bloggers often complain of being unable to upload photos. Either they are made to wait for eternity, or the message DONE appears, but when clicked, no photos are in sight. For problems like this, you can try changing browser. Look at post What to do when you can't publish or upload photos, etc.. (Please note that while FireFox is best for uploading images, the recommendation is to change browser when facing problem, which means that if you are already using FireFox, then change to IE or Opera)

Other ways of uploading photos to Blogger

There are also other ways to upload photos. You can use external photo hosts like Photobucket. You will have to start an account with them, and once you have done that, you can upload your photos, and then use the uploaded photos to post to you Blogger blog. You will have to use the <img src="URL of the photo" alt="XYZ" width="W"> tag where XYZ is a brief description of the photo and W is the width of the photo you want to display. This width W must be less than the width of the main column. You can leave out the height="H" attribute and the height will automatically be adjusted to make the aspect ratio constant and the image undistorted.

You can get the width of the main column by clicking TEMPLATE > EDIT HTML to get the template editor window, then look for this block of codes:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

This is for the template of this blog. Yours might be slightly different. Anyway, this tell me that the width of the main column is 400 pixels and the HTML tag for the photo should then be

<img src="URL of the photo" alt="XYZ" width="395"> or less.

To get the URL of the photo, when you are logged into Photobucket, you just highlight the URL as shown in the screenshot below:

Alternatively, if you are too lazy to type in the tag, that has already been done for you by Photobucket, and that appear in the second box (tag) below the one highlighted above. Just copy that and paste it in the post editor where you want the photo to be in.

The only thing to remember when hosting photos with external photo hosts, the photos will remain only as long as that photo host remain in business. Further, in Photobucket case, there is a requirement that you log in at least once in 3 months, otherwise your account may be deleted, along with your photos. For me, I prefer to host my photos with Blogger. Update: from correspondence with Photobucket, there is no longer a requirement for you to sign in every 3 months, but they said they reserve the right to delete inactive accounts

If you use HTML and you want to be able to manipulate the photos a little more, you can learn how to by going to W3schools. HTML Images.

UPDATE: 11 October, 2006
I made a mistake. I titled this post as "Uploading and manipulating photos on Blogger (and Blogger Beta)". I assumed that since the post editor window is the same in Blogger classic and Blogger Beta, everything will also be the same. But anyway, today I decided to do a test. The report is in this post: Testing manipulating images in Blogger Beta. Resizing and repositioning images in the COMPOSE mode does not work in Blogger Beta. If you want to reposition, you will have to use the method in the EDIT HTML mode as described above. If you want to resize, you will have to add the attributes height="" width="" in the <img> tag. The title of this blog should be "Uploading and manipulating photos on Blogger". However, changing the title means changing the URL to this post (permalink) and this post have already been indexed by the search engines. I don't want the links in their SRP (search result page) to become dead links. Anyway, this has been reported to Blogger support, and I hope they fix that. If I hear from them, or if I find the bug fixed, I will post a further update.

Related post: Uploading and manipulating images Part 2 (click "BACK" button to get back to this page).


Tuesday, September 05, 2006

Blogger Beta: 3 column template.

Ramani of Hackosphere has created a nice hack for 3 column templates for Blogger Beta. For a fuller write-up of this, and also for a link to Ramani's 3 column templates, have a look at 3-column template for Blogger beta

Note: I have noticed that people searching for Blogger 3 column template sometime land on this page. If you are looking for 3 column template for Blogger classic, then you should be looking at Blogger template tutorial - 3 column template

There are also other New Blogger templates modified to 3 column templates by Charlemagne Stavanger. Refer to post New Blogger (formerly Blogger Beta) 3 column templates modified by Charlemagne Stavanger (click "BACK" button to return to this page).


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics