Friday, May 26, 2006

How to get comment and post notification email sent to all team member

In Blogger, there is provision for email to be sent to you whenever someone leaves a comment on your blog. To set this, in the Dashboard, go to SETTINGS > COMMENTS and fill in the email address at the box for COMMENT NOTIFICATION ADDRESS. There is also a provision for an email to be sent whenever a post is published. Go to SETTINGS > EMAIL and fill in the email address at the box for BLOGSEND ADDRESS. However, only 1 email address can be filled in for either post or comment, so if you have a team blog, and each team member want to be notified, you have a problem. Here is a workaround.

Set up a Yahoo group specially for the blog. When setting up the group, there is a provision for entering your group email address. This email address is for your group. When you send a message to this address, all members of your group will receive a copy. For example, I may set the group email address as blogger-tricks@yahoogroups.com. Configure the group so that posts are sent to all members. Then fill in this address for the Blogger COMMENT NOTIFICATION ADDRESS and BLOGSEND ADDRESS. Now, whenever someone makes a comment or publish a post, an email will be sent to blogger-tricks@yahoogroups.com and Yahoo group will in turn send an email to all members of the group.

Books from Amazon

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

NEWER POST    OLDER POST

Wednesday, May 24, 2006

Creating categories step-by-step

Update: This post was written before Blogger upgraded from the old classic Blogger template to the New Blogger xml template (see old Blogger classic template or New Blogger xml template?, and we had to depend on work-arounds to implement categories, and this method involves manual work each time a new post is published. New Blogger introduced Labels (same as categories) which is automatic, and with New Blogger xml template, it is better to use Label list to add a list of Labels (categories) in the sidebar.


In earlier posts:
Blogger categories: A simple method
Blogger categories: Simple method
methods to create categories was described. However, a reader has indicated a step-by-step description is needed, so here it is:

1. Create a del.icio.us account (see Introduction to del.icio.us). Even if you already have an existing del.icio.us account, creat another one specially for setting up the categories. For the user name, I would suggest using part of the blog's url or title. For example, the user name I selected for doing the categories for this blog is bloggertricks.

2. If you are using FireFox (highly recommended), install the del.icio.us extension with the "My del.icio.us" and "Tag this" buttons (see screen shot below:

Click the "Install extension now" button and follow the instruction. This will install 2 buttons into the toolbar.

3. Click the "My del.icious" button. Confirm that you are logged in. If not, then log in.

4. Surf to the main page (index page) of your blog. At the PREVIOUS POSTS section of the sidebar, click on the very first post. This will take you to the individual post page (permalink) of that post, and the PREVIOUS POSTS will then display the next 10 previous posts. Click the "Tag this" button. A pop-up will open with the url, a description, and boxes for you to enter notes and tags. Enter one-word tags for the category you want that post to be in. If the category is more than 1 word, join them with a hyphen or underscore. For example, for my post entitled "Hiding the navbar", since the post is specific to Blogger, I will tag it with "Blogger-specific" (minus the quotes). You can enter more than 1 tag for each post, the tags just have to be separated by a space. Click [save] when you are done.

5. At the PREVIOUS POSTS section in the sidebar, click the next post, which will take you to the individual post page of that post. Click the "Tag this" button again, and tag that post

6. Repeat for the subsequent post until you have tagged all the posts.

Now, you will have to decide which of the methods you want to use - the Easy Method, or the Simple Method. For an example of the Easy Method, surf over to Natural Remedies to see what it is like. The categories created for this blog Blogger Tips and Tricks is an example of the Simple Method. For the Easy Method, go to step 7. If you want the Simple Method, go to step 9.

Easy Method

7. Click the "My del.icio.us" button. At the top right-hand corner of the My del.icio.us homepage, click HELP, then under BLOG INTEGRATION, click TAG ROLLS. Adjust the settings until the appearance of the tag roll you see in the PREVIEW on the right is what you want. I suggest you change the TITLE to Categories or something suitable. For a fuller description of the settings adjustment, refer to the post Blogger categories: Easy method.

8. If the appearance of the categories (tag roll) in the preview window on the right is what is desired, click on the code box at the bottom of the page to highlight it, right-click and copy (or ctrl+C). Preferably in another tab or window, sign into Dashboard, select the blog, click the TEMPLATE tab to open the template editor and paste the codes into your template in a suitable place. If you don't know where to paste it, refer to Blogger template tutorial: Adding content via the template. Preview, and if satisfied, save and republish. Done.

Simple Method

9. Click the "My del.icio.us" button. This will take you to the "homepage" of your del.icio.us account. On the top right corner, you will see the tags you have created.10. Click on one of the tag (for example, BASIC). This will take you the the del.icio.us page that contains all the links to the posts that was tagged with the category BASIC. Highlight the url in the address bar of that page, right-click and copy. In this example, the url will be http://del.icio.us/bloggertricks/basic.

11. Decide on a suitable place where you want the categories displayed (refer to Blogger template tutorial: Adding content via the template). This will normally be in the sidebar. Open a new window (or tab) and sign into Dashboard, select the blog, click the TEMPLATE tab, and in a suitable place in the template, enter the following code:

<h4>CATEGORIES</h4>
<a href="X">A</a><br />
<a href="Y">B</a><br />
<a href="Z">C</a><br />

where X is the url you copied from step 10, and A is the text of the tag, in this example, BASIC.

12. In the previous window, go back to the My del.icio.us homepage, click on the next tag. In the above example, it will be BLOGGER-SPECIFIC. At that page containing all the links to the posts that are tagged with that category, again copy the url, replace Y with the url, and B with the second category. In the above example, the codes will become

<h2>CATEGORIES</h2>
<a href="http://del.icio.us/bloggertricks/basic">basic</a>
<a href="Y">B</a>
<a href="Z">C</a>

(Y and B have been left as it is in the above example as putting in the real url will make the code extend beyond the gray box, but I hope you get the idea)

13. Repeat step 12 for the third category

14. If there are more categories, just add more hyperlinks and repeat the steps.

15. When all the categories hyperlinks are done, preview, and if satisfied, save and republish. Done.

Books from Amazon

Publishing a Blog with Blogger: Visual QuickProject Guide

Book: Blogging for Dummies

NEWER POST    OLDER POST

Sunday, May 21, 2006

Blogger template tutorial: Adding content via the template

blogger template 1
blogger template 2
blogger template 3

Content can be added to the blog in 4 ways - via the settings (sign into Dashboard, select blog, click SETTINGS > BASIC, then fill in the box for the TITLE and DESCRIPTION), editing the profile, posting, and via adding stuff to the template. In this post we will deal with the fourth one. What kind of stuff can be added via the template? Text, hyperlinks, images, HTML and javascripts for advertisements, hits counter, guest book, etc. The screenshots above show text added, but adding other stuff should be no problem. In which part of the template you place the stuff will depend on which part of the web page you want the stuff to be in. As a guide, I have added text in various sections of the template, and the positions they appeared are displayed in the screenshots above. The text are in red (and green) and are pretty much self explanatory. If you want a clearer view of the web page, go to Adding content via the template.

The most common place to add stuff via the template is the sidebar. For this you will have to add the stuff between
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

and
</div></div>
<!-- End #sidebar -->
.
To give you additional navigational aid, there is a button on every blogspot page. Stuff added before or after the following codes
will appear before or after the button respectively.

Further examples:
Where to paste the AdSense codes
For ads after each post, where to paste the codes?

Related posts:
Blogger template tutorial - Components
Blogger template tutorial: 3 column template
Blogger Beta: 3 column template

Books from Amazon

HTML 4 For Dummies

HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Fifth Edition

NEWER POST    OLDER POST

Thursday, May 18, 2006

Blogger template tutorial: Components

The Blogger template comprises 3 main components - the cascading style sheet (CSS), Hypertext Markup Language (HTML) and the Blogger tags. Components of the template will be illustrated by examples from the Blogger Minima template by Douglas Bowman.

Hypertext Markup Language

A HTML file contains markup tags which tell a Web browser how to display a Webpage. The first tag in a HTML file is <html> which tells the browser that this is the start of a HTML document. The last tag of a HTML file is </html> which tells the browser that this is the end of the HTML document. With a few exceptions, HTML tags always occurs in pair, an opening tag and a closing tag. An example of HTML tags which does not occur in pair is the line break tag <br />.

The information between the <head> tag and the </head> tags is header information. Header information is not displayed in the browser window. The cascading style sheet is contained within the <head> tag and the </head> tags.

The information between the <body> and </body> tags is the information that will be displayed in your browser. <div id="header"> signals the start of the information that will be displayed in the header. <!-- and --> are comments tags and text and tags contained within the comments tags are not acted upon, and is only for the purpose of making the HTML clear to the people reading the HTML document. <!-- Begin #content --> tells readers that this section is the start of the content section, <!-- Begin #main --> the beginning of the main column and <!-- Begin #sidebar --> the beginning of the sidebar.

It is a good idea to have a basic knowledge of HTML. To learn HTML online, go to HTML Tutorial.

Cascading Style sheet (CSS)

The cascading style sheet controls the overall style and layout of the web page (how HTML elements are displayed). It is placed in between the <head> and the </head> tags in the beginning part of the template and is bounded by the <style type="text/css"> and </style> tags. */ and /* surround things meant as comments (information). It is only meant for the person reading the template and is not acted upon by the browser. The CSS syntax is made up of a selector, a property and a value in the following syntax: selector {property: value;}. For example, in the Minima template: body{background: #fff;} means that the background color of the blog is white (#fff is the hexadecimal code for white). If you change it to body{background: red;}, the background color will change to red.

For an examples of modification of the CSS, refer to How to change the width of the content column and the sidebar, How to make an image as a background for your blog. To learn more about CSS, go to CSS Tutorial.

Blogger template tags

When you submit a post to Blogger, it gets saved into their database. When you open a page from your blog, this is when Blogger tags come into play. Blogger tags tell their blog publishing program which information to fetch from the database and put on the web page.

There are 2 main types of Blogger tags: item-level tags and page-level tags. Item-level tags are those tags that have the $ sign in them, such as <$BlogItemAuthor$>. The tags get the actual information from Blogger's database and put it on the web. <$BlogItemAuthor$>, for example, display the blog author's name.

Page-level Blogger tags deal with the design and structure of a page. They tell item-level tags when and where they have to perform. For example,

<BloggerArchives>
<$BloggerArchiveURL$>
<$BloggerArchiveName$>
</BloggerArchives>

commands that this is where the browser have to display Archive URL and the Archive Name.

To see an example of the placing of Blogger tags when the information from Blogger database is not fetched from the servers, see example

For a complete list of Blogger template tags, go to Template tag list.

This site may help you understand further: Blogger Template Anatomy

Related posts:
Adding content via the template
Blogger template tutorial: 3 column template
Blogger Beta: 3 column template

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide

Essential Blogging : Selecting and Using Weblog Tools

NEWER POST    OLDER POST

Tuesday, May 16, 2006

Blogger Categories: Easy Method

Update: This method is for the old classic Blogger template. For New Blogger xml templates, you don't have to go through this convoluted method as now you can add LABELS which is Blogger's name for Categories.

Here is a very easy method to do categories using del.icio.us tag rolls. If you are not familiar with del.icio.us, surf over to Introduction to del.icio.us. It is much easier than the method outlined in Blogger categories: A simple method. You don't even have to write the HTML. The script will be generated by del.icio.us software. An example of categories using this method can be seen at this blog Natural Remedies.

The steps are as follows:
  • Sign up for a del.icio.us account. Even if you already have a del.icio.us account, sign up for another one with a different user name.
  • Log into your del.icio.us account
  • Tag each of your post with a suitable tag or category. For example, see Natural Remedies
  • Open your "My del.icio.us" homepage. This would be easiest if you are using Firefox. Click on the My del.icio.us button.
  • At the "My del.icio.us" homepage, at the top right-hand corner, click HELP, then under BLOG INTEGRATION, click TAG ROLLS (or go directly to http://del.icio.us/help/tagrolls). You will then see a page like in the screenshot below
  • Adjust the size, max font, min font to the size you desired. (When you are adjusting the size, make sure that all the tags are included as if you set the size too small, some of the tags may be left out.) If you wish, alter the color of the fonts to blend with your website. Clicking on the color square will unveil a color palette from which you can select your color. Or even better, download Color Pic to determine the correct color from your website.
  • If you wish, change the TITLE to something more suitable. I suggest CATEGORIES. Uncheck the icon box if you don't want the del.icio.us icon to be displayed.
  • Select whether you want to sort alphabetically or by frequency.
  • Select whether you want the tags displayed as a list or as a cloud
  • Tick tag counts if you want the number of tags shown
  • Highlight the script generated in the box below, copy and paste it into your template in a suitable position. I suggest pasting it after <$BlogMemberProfile$> which will display the categories just after the profile in the sidebar.
  • Preview, and if you are satisfied, save and republish.



Products from Amazon

Robotic vacuum cleaner

Robotic floor washing cleaner

NEWER POST    OLDER POST

Tuesday, May 09, 2006

Tip: How to copy features from websites you like

You may come across websites or blogs you like, and you will like to have some of the features you see there. What do you do? Well, the idea is to look at the source codes of the website. At the menu bar, click View > Page Source (FireFox) or View > Source (Internet Explorer) and a window will open with the source codes of the site you admire.

For example, I came across a website which has a CATEGORIES section in its sidebar at I want to be a millionaire.


and in the source codes I look for the text Millionaire Categories. The checking turns up this block of codes:

Click on the screenshot to enlarge it

This revealed that the site is just using del.icio.us and hyperlinks to create his CATETORIES section, and it gave me the idea for a simple method for doing categories for my sites, and also is the inspiration for doing the post Blogger Categories: A Simple Method.

Books from Amazon

Publishing a Blog with Blogger: Visual QuickProject Guide

The Rational Guide to Google Blogger

NEWER POST    OLDER POST

Sunday, May 07, 2006

Tip: Putting the archive links into a menu

If you have been blogging over a long period of time, the list in the archives can get pretty long. You can put the links into a menu to make it more compact. It is pretty straight forward to do. All you have to do is to replace the default archive code with another set of code.

In your template, look for the default archive code which is shown below:

<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>

delete them, and replace it with these codes:

<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>

</select>

and that is all there is to it. It is done.

Note: I have a nagging suspicion that if this hack is implemented on your blog, you may not be able to backup your blog right up to the beginning with Blog Collector. See How to backup your blog. Also, drop-down menu cannot be read by search engines, so it may not help you in search engine results.

Robotic Vacuum Cleaner

iRobot Roomba 4230 Remote Scheduler Robotic Vacuum Cleaner

Electrolux EL520A Trilobite Robotic Vacuum

NEWER POST    OLDER POST

Tip: How to display images side by side

If you want to display images side by side, you will have to use table to do the layout. For example, to display the 2 logo below side by side

Blogger for DummiesNatural Remedies


To display the above 2 photos, it must firs be hosted on the web. This can be done by Blogger (refer to Getting New Blogger to host your images for the profile, sidebar, header, etc. or host it with a third party host like Photobucket. Then you must get the URL ready.

Next, you must find out the width of your main column. To do this, go to

Dashboard > Layout > Template Designer > Adjust width

And there you will see "Total width" and "Sidebar width". Thus the main column width = "Total width" - "Sidebar width". See screenshot below:

Blogger template designer adjust width

This tells me that the width is 400 pixels and I must make the width so that together they will fit in the column. In this case, I have chosen to make the width of the 2 images 180 pixel wide each. I have two choices of doing it. Resize the image to the proper width first with a photo editor like Irfanview, then upload it to the web, or leave the size as it is, then add a width="180" attibute to the image tag, like this: <img src="image URL" width="180" />. The height will automatically be resized to keep the aspect constant and so can be left out.

To display the image above, I put them into a HTML for a 2 column table, with the <img> as the contents. I show an example below

<table>
<tr>
<td><img src="photo1 URL" width="180" /></td>
<td><img src="photo2 URL width="180" /></td>
</tr>
</table>


replacing photo1 URL and photo2 with the actual URLs of the logo. Also, I have shown the HTML for the table in different lines to make it easily understandable. If you actually write the table this way, what is going to happen is there will be a large empty space above the table. You would have to write the HTML for the table in one continuous line without pressing the ENTER key.

Actually, the 2 logo above have been made into hyperlinks. Click on it and see what happen. It will take too long to explain it, but if any of you are interested, comment in the post and I will make the effort to explain it, perhaps in another post.

Books from Amazon

Photo blogging: SplashPhoto and SplashBlog help consumers share images on the Web.(services of SplashData Inc.) : An article from: Digital Imaging Digest [HTML] (Digital)

Videoblogging For Dummies

Buzz Marketing with Blogs For Dummies (For Dummies (Business & Personal Finance))

NEWER POST    OLDER POST

Friday, May 05, 2006

How to change the width of the content and the sidebar

This is a common request of bloggers using some of Blogger standard templates when they see wide spaces on either side of the main and side column, like what you will see in this blog if viewed with a large screen. This is to take into consideration those with small screens. If you want to see how this page will display in a 800x600 resolution, type or copy-paste this into the address bar: javascript:top.resizeTo(800,600). You will see what others with small screen see, and there are will wide spaces. If you change the width of the content column and sidebar, it will look different to those with different screen resolution. It may involve a lot of scrolling to see other parts of your blog, and the less patient ones may pass your blog by. Anyway, if you still want to change the width, the instructions are below:

If you want to change the width of the content and the sidebar, you will have to modify the style sheet. This is based on the Blogger Minima template. Look for the following block of codes:

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



Note that the sum of the width of the main column (410px) and the sidebar (220px) is less than the total content (660px). You may change the width to whatever you fancy so long as you keep the sum of the width of the sidebar and the main column to be less that the total content. For example, you may change the width of the total content to be 800px, the main column 500px and the sidebar 270px, and your style sheet will become as follows:

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



You may also want to change the width of the header as well, as follows:

/* Header
----------------------------------------------- */
@media all {
#header {
width:800px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}



BTW, if you want to see the effect that this change will have on viewers with 800X600 screen resolution, you can type javascript:top.resizeTo(800,600) into the address bar to resize the window to 800x600.

Reminder: Always backup the template before you make any changes to it.

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide (Visual Quickproject Series)

The Weblog Handbook: Practical Advice on Creating and Maintaining Your Blog

The Rational Guide to Google Blogger

NEWER POST    OLDER POST

Thursday, May 04, 2006

Tip: How to make permalink more prominent

What is a permalink?

If you have enabled POST PAGE, then each individual post of your blog will have an individual post page with its own URL. If you are using the default settings for your blog, you will see at the bottom of every posts a line "Posted by (author) at (time stamp)" as illustrated in the screen capture below:

If you let your mouse hover over the time stamp, a pop-up will appear with the text "Permanent Link", and if you click on the time stamp, you will be redirected to the individual page of the post. This is good for your blog as people who want to refer (and link) to this particular post will be able to do so. However, this default setting have the disadvantage that the permalink is not prominent and is not easily noticed. Many are not even aware that the time stamp is a permalink. There is an easy way for you to make the permalink more noticible by adding the text "PERMALINK", as shown in the screenshot below:

To do this, you will have to look for this block of codes in your template:

<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>

and add the text PERMALINK after <$BlogItemDateTime$>, like this:

<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$> PERMALINK</a>



UPDATE 17 November 2006: For Blogger Beta template, refer to this post Blogger-beta: Making the permalink more prominent (click "BACK" button to return to this page).

Books from Amazon

Blogging and blogspots: an alternative format for encouraging reflective practice among preservice teachers.(Blogger, an online weblog service for student teachers) : An article from: Education [HTML] (Digital)

Essential Blogging : Selecting and Using Weblog Tools

Blogging For Dummies

NEWER POST    OLDER POST

Tuesday, May 02, 2006

Blogger (classic template) Expandable Post Summary

UPDATE: 22 July 2008: For New Blogger XML template, refer to Expandable post summary for New Blogger.

UPDATE 2: Blogger has implemented expandable post summary which they call JUMP BREAK. More details at Blogger Buzz: You might as well jump

What is Expandable Post Summary?

You may be in the habit of creating long posts, and your readers have to scroll and scroll to get to the next post in the main or archive section. You don't want that. You want only to have the first few lines of the post visible, followed by a READ MORE hyperlink that takes you to the full post. That is expandable post summary.

How to do expandable post summary for Blogger

First, you have to ensure that you have POST PAGE enabled. Go to SETTINGS > ARCHIVING and make sure that ENABLE POST PAGES? is set to YES. Then paste the following codes into your CSS (Cascading Style Sheet. It will be the section between the <style> and the </style> tags in beginning of your template.) (Important note: It is always advisable to backup the template before you do any modification to it.)

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>


Then add the following codes in the template just after the <$BlogItemBody$> tag

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>


You can replace the anchor text Read more! with Read the rest of the post... or whatever you fancy.

The next thing you have to do is to place some pieces of codes in your post. Put the tag <span class="fullpost"> at the spot where you want your long post to be truncated, then type in the rest of the post. At the end of the post, add the tag </span>. Thus your post may be typed as follows:

This is the beginning of a long post, which is truncated here. <span class="fullpost"> This is the rest of the long, long post. </span>

If you don't want to have to type in the codes by hand each time you do a post, you can add the codes in the post template by going to SETTINGS > FORMATTING and at the bottom of the page, in the POST TEMPLATE box, add in the codes <span class="fullpost"></span>. Just make sure that the text are typed in the proper place.

Monday, May 01, 2006

Tip: Hiding the navbar

Update 24 May 2007: A blog visitor complained that the instruction didn't work for him. This post was written before New Blogger was introduced and perhaps it wouldn't work for New Blogger. If you are using New Blogger template, refer to How to hide navbar for New Blogger

Update 24 October 2006. Some people have very stong opinion about the hiding of the navbar as it violate Blogger TOS (Terms of Service). They feel that Blogger is asking very little of bloggers in return for providing this free service. Please read the rest of this post with that in mind. And be reminded that there are advantages of having a navbar at the top of your blog. However, many people are wary of the Next Blog link in the navbar which takes to to random Blogger blogs, some of which may contain explicit sexual content, hate messages, etc. Some educators who want to set up blogs for their students are understandbly wary of this and want to remove the navbar, and I can understand why.

The navbar is the bar at the top of every blogspot.com blog that contains from left to right, the Blogger logo, a search box, Search This Blog, Search All Blogs, Blog This!, Get Your Own Blog, Flag, Next Blog. It is by default dark blue in color, but it may have been changed to tan or some other color.

Many bloggers for some reasons or other want to hide this navbar. To hide the navbar, try adding this code in between the <style></style> tags, in the <head> section.

<!--Code to remove blogger navbar-->
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
<!--End of code to remove blogger navbar-->


However, here are some reasons why one should keep the navbar. For one, I believe the navbar is required as per Blogger's Term of Service. Another is to allow visitors to navigate around your blog by using the blog search box at the top left-hand corner. In fact, on my blog, I have 2 search boxes, one in the navbar and one Google sitesearch box. I have noticed that the search results from the 2 boxes differ. One search result may turn up a relevant topic when the other one fails to do so.

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)
scroll box causing problem for small screen viewers
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

How to change date and time of your post


The option to change the date and time of your post used to be present by default at the bottom of the post editor, but now you have to click "Post and Comment Options" to display it.

BTW, if you want to change the order of display of your posts, the only way to do it is to play around with the dates and time.

NEWER POST    OLDER POST

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