Change sidebar title background color

A blogger asked: "I want to add background colour to the sidebar title / header. pls show me the way.".

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:

.sidebar h2 {
etc. etc.
}

etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read

.sidebar h2 {
background-color:blue;
etc. etc.
}

If you cannot find

.sidebar h2 {
etc. etc.
}

Then just add this:

.sidebar h2 {
background-color:red;
}

(or any color rather than red or any other HTML color code

to anywhere before

]]<>/b:skin<

but preferably just after:

/* Sidebar Content
----------------------------------------------- */

so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}

Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Related post: How to change background color of sidebar

Changing the sidebar font

Got a question from a blog reader on how to change the sidebar font. So I did a little testing. See the screenshot of original font in the sidebar of this blog (click on screenshot to enlarge it):



I believe the original font is Arial. Now see the screenshot after editing the template (as above, click on screenshot to enlarge it):



Note that the font has been changed to Times (you got to see the enlarged screenshot to see the difference, or surf over to Taman Sentosa to see the actual site.

This is the way to do it. This involves opening the template editor and as always, backup the template before you make any changes. If you are not familiar with that, see the instructions at Backing up and changing New Blogger template.

After you have opened the template editor, in the template editor window, look for this block of codes in the CSS:

.sidebar {
color: $textColor;
line-height:1.3em;
}

Add in a line for the new font, for example, if you want Times, add the line

font-family: times;

so that it becomes

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
}

Preview, and if satisfied, click "Save template".

Update: I was asked about changing the font size too. If you want to do that, just add the line

font-size: 150%;

or any other percentage as you wish. You may also specify in pixels (px), eg. 12px

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
font-size: 150%;
}

Of course, if you want other font, just use a different font. BTW, I have changed the font size of the sidebar of the blog Taman Sentosa

Books for Google Blogger

Getting New Blogger (formerly beta) to host your photo for the profile, sidebar, etc

Update 14 July 2007: I have preferred to use Blogger to host my photos rather than third party photo host like Photobucket because of doubts regarding the long term stability of Photobucket, but they have recently been confirmed to be taken over on On May 30, 2007 by Fox Interactive Media, a News Corporation subsidiary at a price rumoured to be as high as $250 million US. So Photobucket is now backed by a big and financially stable corporation and I no longer have that reluctance to use Photobucket to host photos for my blogs. Using that may be easier than the convoluted steps outlined below:

I have written a previous post on how to get Blogger to host your photo for the profile, sidebar, <img> tags, etc at Getting Blogger to host your pictures for the profile, sidebar, etc.. However, tests have shown this method no longer works.

For New Blogger, this is what you have to do. Upload your photo to a post which if you don't want it to be on the main page, pre-date it to 2005 or something, or even in a blog created specially to host pictures (Blogger does not limit the number of blogs you can create). I upload this photo as an example:

Kuala Lumpur night skyline

Click on the picture (or the caption) to get an enlarged version of the photo. In the method describe previously, you will use the URL in the address bar of this page. Don't. It wouldn't work now. You can try it yourself if you want. Try putting that URL into the Photo URL in the EDIT PROFILE page and confirm for yourself that it can't be done. You will get the error message "Cannot find file at specified URL: link is broken (failed request)" and if you have already put in your profile photo, that will remain as this attempt will fail to replace it. You can also try putting that photo into the sidebar using "Add a Page Element" in the Layout, choosing "Picture" in the pop-up, and putting that URL in "Configure Image" page. You will get the error message "Please specify an image". Putting that URL int the <img src="photo URL"> tag will also not display a photo.

Instead, in the page containing the enlarged photo, in the menu bar, click VIEW > PAGE SOURCE to get the source code for the page. In this case, the source code is as given in the scroll box below:

<html>
<head>
<title>copyright+notice.jpg (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRU1H4O_RhIdtPf0imtoEb-XkKnVInw50HGVhzEEal0m5GhPxnDtsKrUvzXZQQn9ANUvgkcBKMqK3L4UN2oWCMhntnSC6X0RGun-gpvkg7_YSPHdxDYGSCDBpazivkx996kMZKs4_i0LE/s1600/copyright+notice.jpg" alt="[copyright+notice.jpg]" border=0>
</body>
</html>

And almost at the end of the codes, you will see src="http://1h6.google.com/.....
I have to put the full URL in a scroll box, otherwise the long unbroken URL will extend into the right sidebar (FireFox) or cause the sidebar to slide to the bottom of the page:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRU1H4O_RhIdtPf0imtoEb-XkKnVInw50HGVhzEEal0m5GhPxnDtsKrUvzXZQQn9ANUvgkcBKMqK3L4UN2oWCMhntnSC6X0RGun-gpvkg7_YSPHdxDYGSCDBpazivkx996kMZKs4_i0LE/s1600/copyright+notice.jpg

This should be the photo URL you should use for the profile photo, for inclusion in the <img src="photo URL"> tag, for Picture in the sidebar, etc.

Update 12 April 2007: I have made the actual photo URL in the first scrollbox red so it is easier to spot.

Incidentally, the above photo is copyright of Tourism Malaysia in which I have put a copyright notice at the bottom right of the photo. I will describe how to put a copyright notice in your photo in a post in Dummies Guide to Google Blogger. (I have just added that post to that blog. You can read it here: A simple way to put a copyright notice to your photos

The photo can be used to promote tourism to Malaysia. 2007 is Visit Malaysia Year, and many programs have been planned for visitors and this will be a good year to visit Malaysia. For more information, see Guide to Malaysia.

Acknowledgement: This tip was provided by my online friend sookietex of Public Domain Clipart

New Blogger Template Tutorial: Adding a Second Sidebar

If you want to add a second sidebar to your existing template, Hans of Beautiful Beta has a post Adding a second sidebar Part II have a very well written instruction on how to do it. Even if you have no intention to add a second sidebar, his post is worth a read to understand the New Blogger template better. The only thing I can add is to copy his numbered lines of code into Notepad (see below)

010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>

and then read the rest of his tutorial side by side with the list in Notepad so you don't have to go back and forth in the post to refer to the list of code.

As for me, I am satisfied using ready made 3 column templates. See
Blogger Beta: 3 column template
New Blogger (formerly beta) 3 column template modified by Stavanger.

How to delete comments Part II

Recently I found that my sidebar of some of my posts were down at the bottom of the page, and it wasn't my fault. It was caused by commentors who left long unbroken text/unclickable links in the comment. I tried to delete the normal way, that is, log into Blogger, surf over to the post containing the comment, look for the trashcan icon, click on it, and confirm deletion. Well, it didn't work for me, probably because I had tampered with the permalink (timestamp). So I had to contact Blogger support. That is another story that you can read here How to contact Blogger support. I finally did get a reply from them with instruction on how to delete the comment.

I found the month in which the problem post was, click on that month in the archives, scroll to the post, click on the comments, and there I finally saw the trashcan, click on it, and deleted the offending comment.

So folks, sidebar sliding to the bottom of the page may not be only your fault. You should check the comments made by your visitors to make sure they don't contain any long unbroken text/unclickable links.

NEWER POST

HOME

OLDER POST

Advice to Blogger bloggers regarding comments, comment moderation, and sidebar problems

There are a couple of things I would like to highlight regarding comments in Blogger blogs. Among other things, it may cause the sidebar of your post to slide to the bottom of the page in Internet Explorer through no fault of yours:

Long unbroken lines in comments and the sidebar

Today, I received a comment moderation notification email and approved it, but only after I posted it, I realised that the commentor has included a long link (non-clickable) which will cause the sidebar to slide to the bottom of the post. I checked in Internet Explorer (most of the time, I use FireFox with the Google toolbar (close new window to return to this page) and confirmed it. I quickly commented on the comment author's blog (there was no email) and explained the reason why I am forced to delete the comment (it was a comment which disagree with my post) and that I hope she will comment again, making the link a clickable link (close new window to get back to this page) and I will approve it. If keeping the sidebar in the proper position is important to you, I will advice that you examine the comments carefully for such things linke long, unbroken line of texts, especially long unclickble links, long line of unbroken code, etc. This has happened to me more than once (see section below).

Moderating comments

For most of my blogs, I have enabled comment moderation to keep out spam comments, etc. However, one day, a member of the Google Blogger Help group asked if he can edit the comments. Now in the comment moderation notification email, there are 3 options - Publish, Reject, Moderate. I have practically all the time clicked Published, and on rare occasions, clicked Reject, but I have never clicked on Moderate. I thouht that clicking on Moderate will allow one to edit the comment, but no. I wanted to check before I answered that question, and looked for a comment to moderate. It so happen that the only comment moderation email notification I had was for a Blogger beta blog. I clicked on Moderate, expecting to be taken to a page containing that comment. Instead of that, I was taken to a page with a list of comments waiting for me to moderate, with the comment I received for moderation right at the top. The comments below I have never received any notification. I took some time to moderate all the comments there. I initially thought that this was only a Blogger Beta bug.

Just in case it is not only a Blogger beta bug, I decided to check on one of my Blogger classic blog (this one) in the Dashboard for this blog by clicking on the "Moderate comments" tab. To my horror, I found a list of 51 comments waiting to be moderated, some dating back to June, and for which I also never received any email notification. And more important, I found that there is no way I can find in which post that comment was made, which makes responding to the comment very, very difficult. So if your comment was not published in good time and/or not responded to, blame Blogger, not me. I have notified Blogger support, and hope they have taken note of the problem and is doing something about it, especially making the information as to which post the comment was made in available when one moderate comments via the Dashboard. In the meantime, if you are moderating comments via email notification, do take the trouble to check "Moderate comments" in the Dashboard once in a while. That reminds me. I must check that in my blog Dummies Guide to Google Blogger (close new window to get back to this page).

BTW, there was one comment with a long lines of unbroken codes in one of my post which canused the sidebar to slide to the bottom of the page, and which I didn't discover for a long time. That was very embarassing because I have a post in my blog which explain what to do when sidebar is pushed to the bottom of the page.

UPDATE 14 November 2006: I logged into Dashboard and clicked this blog in the list of blogs in the Dashboard. Clicked on "Moderate comments" and again found 10+ comments waiting for moderation for which I never receive a email notification. I approved all except 2, one being a duplicate, and another one a spam. I have no idea which posts the comments were made, so am unable to respond. I have already informed Blogger, but looks like they are either too busy, do not want to, or cannot do something about it. I will inform them again and see if matters improve.

NEWER POST

HOME

OLDER POST

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):

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):

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">
and
</div></div>
<!-- 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

The image above is displayed by this HTML:

<h3>Citrawarna or Colors of Malaysia</h3> <img src="http://photos1.blogger.com/blogger/5611/753/1600/citrawarna%20400%20pixels.jpg" 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

NEWER POST

OLDER POST

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:


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:
It 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="http://foodasmedicine.blogspot.com">Natural Remedies</a> <a href="http://enviromansays.blogspot.com">Enviroman Says</a> <a href="http://guide-to-malaysia.blogspot.com">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> <ul> <li><a href="http://foodasmedicine.blogspot.com">Natural Remedies</a></li> <li><a href="http://enviromansays.blogspot.com">Enviroman Says</a></li> <li><a href="http://guide-to-malaysia.blogspot.com">Guide to Malaysia</a></li> </ul>

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>

NEWER POST

OLDER POST

How to add hyperlinks in the sidebar

This post is a result of a request from a reader. There are various ways in which you can add links to your favourite websites in the sidebar. One of the easiest is to just modify the given codes for the links which most standard Blogger templates has. Look in the template, between
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
and
</div></div>
<!-- End #sidebar -->
for the following block of codes in the template.

<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">
Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">
Edit-Me</a></li>
</ul>
</MainOrArchivePage>

What you have to do is to edit the URL and the text to be displayed (in the first link they are respectively http://news.google.com/ (URL) and Google News (text to be displayed). You will have to replace the URL with the URL you want the link to point to, and you will have to replace the text to be displayed with your own text. For example, I want to have 3 hyperlinks to point to the blogs "Blogger for dummies", "Blogger Tips and Tricks" and "Adsense Alert" (these are the texts that will be displayed in the links. The above will have to be edited to

<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://bloggerfordummies.blogspot.com/">Blogger for Dummies</a></li>
<li><a href="http://blogger-tricks.blogspot.com">
Blogger Tips and Tricks</a></li>
<li><a href="http://adsense-alert.blogspot.com">
Adsense Alert</a></li>
</ul>
</MainOrArchivePage>

These hyperlinks will appear in the main (index) page and the archives pages under a heading "Links", but will not appear in the individual post pages (permalink). If you want it to appear also in the individual post pages, you will have to remove the <MainOrArchivePage> and </MainOrArchivePage> tags. Also, you may change the text Links (which you will find in <h2 class="sidebar-title">Links</h2> to anything you want, like changing it to My favourite sites. If you want more links, you can just copy and paste the code for the hyperlinks. Just copy, paste and edit the line of <li><a href="http://news.google.com/">Google News</a></li>

If you want more sections for the links in other parts of your sidebar, you can copy and paste the codes to relevant parts of the template, and then edit them as described. For a guide as to which part of the template to paste them into, refer to the post Blogger template tutorial adding contents to via the template. And if your template doesn't have the codes already in the template (like for example the standared Blogger Sand Dollar template) you can always copy and paste the codes above into your template and then edit it. For a guide as to which part of the template to paste the codes, refer to the post Blogger template tutorial - adding stuff via the template

You can also add hyperlinks in other ways. The above uses unordered list, which leave big space between the links. If you want the list of links to be more compact, you can use the following codes instead:

<h3>Websites I visit</h3>
<a href="url 1">description 1</a><br />
<a href="url 2">description 2</a><br />
<a href="url 3">description 3</a><br />


As before, you can change the text "Websites I visit" to anything you want.

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Essential Blogging : Selecting and Using Weblog Tools

OLDER POST

NEWER POST

How to make sidebar display on the left and main column display on the right

The default for the Blogger Minima template and most standard Blogger templates is the main column is on the left and the sidebar is on the right. This may create problems when you often post long links or wide images which may exceed the width of the main column. The long links or wide images will then extend into the sidebar and cause it to slide to the bottom of the page. (Note: Read update below). To overcome this, you may want to modify the template so that the sidebar is on the left and the main column is on the right. To do this, look for this block of codes in the template:

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

and change the text colored in red to the following:

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:right;
}
#sidebar {
width:220px;
float:left;
}

Update: I have tried uploading a 550px wide photo and this caused no problem in FireFox and Opera, but caused the sidebar to slide down to the bottom of the page in Internet Explorer.

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Blogging: Genius Strategies for Instant Web Content by Biz Stone, former Senior Specialist on the Google Blogger team

NEWER POST

OLDER POST

What to do: Sidebar slide to the bottom of the page

A very common complaint of bloggers is the sidebar, and sometimes the content (main column) of the blog sliding to the bottom of the page. Sometimes this happen in all the browsers, sometime in one browsers and not the others. This happen most frequently in Internet Explorer. I have previously published post about the same problem at Sidebar pushed to the bottom of the page. Here I try to explain further what to do about it.

Images and hyperlinks

The most common cause of this problem is having photos or hyperlinks that are too wide/long for the width for the main column or the sidebar. Try saving the post containing the photo or hyperlink suspected of causing it in draft form, and see if that helps (see update below colored in red for a better way). If it does, removing the post or reducing the size of the photo will help. If you are not familiar with manipulation of images, read this post: Uploading and manipulating images with Blogger and Blogger Beta (click "BACK" button to get back to this page).

Update: I found that a better way is to look at the individual post page by clicking on the timestamp (permalink) at the bottom of the post, or by clicking on the title of the post in the Previous Posts section of the sidebar. If the sidebar is where it should be - at the top of the page, then that post is innocent and you should leave it alone. If the sidebar is at the bottom of the page, then it is that post that is causing the problem and you need to do something about it. With this method, you need not go to trouble of saving it in draft, and then publishing it again)

If it is a long hyperlink, reduce the anchor text to a short text. Some people are fond of writing the HTML for the link like this: <a href="URL">URL</a>. If the URL happens to be a long URL, then you will end up with a very long unbreakable link which will cause your sidebar to slide down to the bottom of the page. Write your HTML for the link this way:
<a href="URL">description</a>

Tracking down the problem

You may also try doing some detective work. Think back to what you did just before it happened. Undo it and see if that helps. You may want to try to track down what is causing the problem. You may try looking at each individual post page and see if the problem occurs. (see update in red above). Try to check to see if the problem is with the template (see below)

Template

Sometimes the problem is caused by incorrect codes or missing or mismatched tags in the template. Rat reported that once it was caused by a closing comment tag --> without an opening comment tag <!--. HTML tags occurs in pairs - opening tags and closing tags.

If you want to see if the fault is in the template, first BACKUP your template. If you don't know how to backup the template, read post How to backup your template (close new window to get back to this page). Then load a fresh template to see if that helps. If the sidebar is at the bottom, then it has something to do with the template. Use a new template, and if you have a lot of customization, lessen your workload by copy-pasting the customizaton from your backup template. If don't want to start all over again, put back the backup template and try to locate the problem, If you can't, then post your problem to the Blogger Help group (close new window to get back to this page) and see if anyone can help.

Others

Another way to solve the problem is to change the width of the content and the sidebar. When you do this, you have to keep in view how it will affect the way the blog is displayed in different screen resolutions. Read about how to change the width of the content and the sidebar in this post: How to change the width of the main column and the sidebar (click "BACK" button to get back to this page). If you are using a large screen, and you want to check how those with 800x600 screeb resolution see your blog with the changes, type or copy-paste this into the address bar - javascript:top.resizeTo(800,600) and press the enter key.

Sometimes it is caused by you, and sometime, as I discovered earlier, it can be caused by people commenting in your post, putting long unbroken text or codes. That had happened to me twice. It was most embarassing for me as I have this post which is about how to solve sidebar at the bottom of the page problems, and I wasn't aware of the problem for a long time. Most of the time, I use FireFox with Google toolbar (close new window to get back to this page), and that problem only was seen in Internet Explorer. I was thus unaware of it for a very long time.

I very often have to include example of HTML codes which contain long unbroken text/code, and in order to do that, I have to put them into a scroll box. If you want to know how to include a scroll box, have a look at post How to make a scroll box (click BACK button to get back to this page). This can be another source of problem because I have to decide on the width of the scroll box to fit into main column. In one of the blog, I used a modified Thur's 3 column Minima template (click BACK button to get back to this page). I use a large screen. In that problem post, I had chosen a width for the scroll box which easily fit into the main column in that screen resolution, but recently, I discovered that for those using 800x600 screen resolution (about 10-20% of my readers) the page was screwed up. See screenshot (click to enlarge)

That was for this blog. I think I will change back to the standard Blogger template.

Note: For an actual example of how I try to show a blogger solve this sidebar slide to bottom of the page problem, refer to Trouble shoot sidebar slide to bottom of the page problem: Actual example (click BACK button to get back to this page)

NEWER POST

OLDER POST