Wednesday, December 06, 2006

Blogger Beta: Saving valuable space above the fold

The part of a blog above the fold is the section of a the blog that is visible without scrolling, that is, the first part of the blog viewable when a visitor first land on the page. This is valuable "real estate" because this is what catches the attention of the visitors, and this is where a blogger will like his most important parts of the blog to appear. This may apply to advertisements, referral buttons as well as things like CATEGORIES in which visitors can immediately see what is available in the blog.

There are ways to optimize the use of this section above the fold. Look at this blog, for example: Computer and Internet articles (close new window/tab to get back to this page). Notice the large empty space between the FireFox and the AdSense referral buttons. These are wasted space, and pushes the other parts of the sidebar below the fold where it is only visible by scrolling. This is because the scripts for the referral buttons were added via separate "Add a Page Element" widgets. Compare it with this blog: Cars and Trucks Articles (close new window/tab to get back to this page). Noticed that the space between the referral buttons are very much closer and there is no wastage of space. The scripts for the referral buttons were added via a single "Add a Page Element" widget (see screenshot below. Click to enlarge):
Blogger Beta: adding Adsense referral button scripts for less wastage of space
Note that I have documented the type of script by using a comment tag, for example: <!-- AdSense referral button --> for later reference.

Similarly, you can waste a lot of valuable real estate (portion above the fold) by adding text referral links via separate "Add a Page Element" widget like this blog: Good Parenting Practices (close new window/tab to get bact to this page). Note that the text referral links in the top of the right sidebar are separted by wide empty spaces, wasting a lot of valuable real estate. Compare it with the text referral links in the top of the right sidebar of this blog: Motivation and Self Improvements (close new window/tab to get back to this page). The links were added via just a single "Add a Page Element" widget, and choosing HTML/Javascript in the pop-up. See screenshot below (click to enlarge):
Blogger Beta: Adding text referral links in a single page element widget

Note that I have added two line break tags <br /><br /> tags in between the scripts for the text referral links to improve readability. If you wish, you may just add 1 <br /> tag in between the scripts to save more space, but it will be harder to distinquish between the text referrals. Look at this blog for example: Good Legal Information. The referral text links are at the top right sidebar. The text links are only forced into separate lines by a sinle <br />, and there is space to separate one text link from the other, but a lot of valuable real estate above the fold is saved in this way.

If there is anything that is not clear, please leave your comment in the comments section, and I will try my best to make it clearer.



  1. Thankyou for your very informative blog.
    I havw been trying to add multiple ads to but when I changed the code on the template the ads disappeared completly.
    But, the same code worked on href=

    Another problem: Blogger won't accept HTML because of a "broken link" that works on WordPress.
    I am about ready to give up on Blogger altogether.

    Steve Lee

  2. Are you using old classic template or New Blogger template? And where are you trying to put your ads? These are information required for your question to be answered.

  3. Thank you so much for the detailed effort you put into your post, I can't tell you how much it helped me! Thank you!


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