Saturday, December 16, 2006

More Blogger Beta templates by Stavanger with fixed and fluid width

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

For those who are not satisfied with the Blogger standard templates or Ramani's 3 column template for Blogger beta (close new window/tab to get back to this page), Stavanger of Blogcrowd forum (close new window/tab to return to this page) has provided a number of Blogger Beta templates. (Ramani's 3 column template is good for those blogs which still receive significant percentage of traffic from visitors with 800x600 screen resolution. The statistics I get from statcounter for my blogs is that 10-20% of my visitors still use the 800x600 screen resolution, so it is always good to check how your blog appear to such visitors as described further below. If you want to know this statistics for your blog, you should install statcounter. See How to track visitors to your blog (close new window/tab to return to this page)). And if you get a significant percentage of visitors still using the 800x600 screen resolution, you should always check to see how they get to view your blog, and in different browsers (see post Why you should be using more than one browser as I am very sure you wouldn't want to discourage your visitors from coming back. The method to check this is described below.

Here are some blogs that uses Stavanger's templates:

3 column fixed width Blogger beta template

This blog Good Music and Movies uses the Stanvanger's Rounders3 3 column fixed Blogger beta template (close new window/tab to return to this page). The advantage of using a fixed width template is that your blog will appear the same to all visitors irrespective of the screen resolution they use, the only difference being you get to see a smaller portion of the page if you use a smaller resolution than what it is designed for. And when you post photos, scrollbox, etc., they does not cause any problem (sidebar sliding to the bottom of the page, etc.) irrespective of screen resolution as long as the width is not wider the the fixed width. The blog above is optimized for the 1024x768px screen resolution, and if you are using this resolution, you will view the blog filling the whole screen.

Look at this post for example: 400px wide photo in Stavanger's Rounders3 fixed width Blogger Beta template (close new window/tab to get back to this page). I am viewing this post with 1024x768 screen resolution, and I see the photo occupying the whole width of the main column. If you are using this screen resolution or bigger, try typing or copy-pasting "javascript:top.resizeTo(800,600)" (minus the quotation marks) into the address bar and pressing the Enter key, and you will resize the screen to 800x600px. You will see the main column remain the same width and part of the right sidebar hidden, plus a horizontal scrollbar at the bottom of the page for you to scroll to see the rest of the sidebar.

The advantage (and disadvantage) of a fixed width template is as above, if you view it with a lesser screen resolution than what it is designed for, the main column remain the same width, but you will not get to see the whole screen (sidebar). You will have to use the horizontal scrollbar to see the rest of the sidebar, which may irritate some viewers with smalller screen resolution. However, as long as you make sure that whatever you post does not exceed the width of the main column (400px in this case), you can be sure that the main column and sidebars will remain where it should be - at the top of the page. The disadvantage is that when you post a photo, scrollbox, etc. wider than the main column width, the main column and the right sidebar will be pushed to the bottom of the page with Internet Explorer 6 (I don't know about IE7. I hope those who have IE 7 will leave a comment on how the post appear to them). In FireFox and Opera, the main column and right sidebar will remain at its position, but the photo will extend into the right sidebar. Look at this post for example, which contain a 800x400px photo: 800x600px photo of Sibu Island, Johore, Malaysia. Try viewing it in Internet Explorer, FireFox and Opera and viewing it in 800x600 window (type or paste javascript:top.resizeTo(800,600) into the address bar).

3 column Blogger beta template with fluid width

This blog Digital Photography Articles (close new window/tab to return to this page) is using Stavager's Washed Denim 3 column fluid Blogger beta template (close new window/tab to return to this page). The advantage of this template is that if I post a wide photo, scrollbox, etc., the main column and/or sidebar will not be pushed to the bottom of the page in Internet Explorer 6.

See this post for example: Wide photo in fluid main column template(close new window/tab to return to this page) (close new window/tab to get back to this page). I am viewing the post with 1024x768 screen resolution, and the right part of the photo is hidden by the right sidebar. I don't have 1152x864 screen resolution or bigger, but I expect viewers with those resolutions will see more of the photo.

However, the common problem of the sidebar and/or main column being pushed to the bottom of the page in Internet Explorer does not occur. It appear the same in FireFox, Internet Explorer and Opera. To see how those with smaller resolution, try typing or copy-pasting "javascript:top.resizeTo(800,600)" (minus the quotation marks) to resize the window and see the difference. In all 3 browsers that the photo can be viewed partially (covered by the right sidebar) as before, but a horizontal scrollbar will appear at the bottom of the page you will have to use the horizontal scrollbar to see the rest of the right sidebar.

Note that if you use the above templates, the LAYOUT of your beta blog will be a bit distorted, but it should cause not any problem. To see a screenshot of the Layouts, go to Layouts of blogs using Stavanger's Blogger beta templates (close new window/tab to return to this page).

  NEWER POST    HOME  OLDER POST

10 comments:

  1. Anonymous12/17/2006

    hi.

    thanks for stopping by at mine and replying!

    actually the site you visited is my test site.. i'm currently using that to see if i can get my head around the beta templates and html. i hope to eventually be able to turn my real mamahog site into a layout template but until i can make it do what i want i'll stick to classic for now. i'm computer illiterate really and it took me ages to get mamahog the way i wanted it, and now i'm having trouble working from scratch with the k2 template in beta!

    the reason i first came here was because i was looking for advice on how i could put up a link on each page to older posts. as when the labels pages appear only 20 show on a page and as yet i have no way of getting to the older ones.

    i see you have new buttons doing this on each post.. but only to the previous post (singular). i guess this means it's not very easy.

    if you do find a way please drop me a line to let me know.

    also my labels and links on pupprthog have gone to the bottom despite me doing it with the layout system. any ideas as to why??

    sorry this is so long.
    loved your other site btw.
    thanks.

    ReplyDelete
  2. Anonymous12/17/2006

    Hi Peter.
    Im using Beta and have been trying endlessly to add a counter to my blog, with no luck. I get as far as the "Page Elements" page, but cannot find "Add Aother Page Element" as my page ALWAYS opens with "error on page". I do get all the other options, like nav bar,archive and post editing, just no "add another page element."
    Please help

    ReplyDelete
  3. First, are you using Blogger classic or Blogger beta template. To tell the difference, look at this post: Blogger calssic or Blogger beta template.

    ReplyDelete
  4. Anonymous12/17/2006

    Hi Peter.
    It seems im using the Blogger Beta template.

    ReplyDelete
  5. So what happens when you click on LAYOUT?

    ReplyDelete
  6. keda said: "also my labels and links on pupprthog have gone to the bottom despite me doing it with the layout system. any ideas as to why??"

    Maybe you posted something wider than the width of the main column or the sidebar. See post What to do when sidebar slide to the bottom of the page

    Peter
    Enviroman Says

    ReplyDelete
  7. Anonymous12/18/2006

    Hi Peter.

    Ok, when I click on 'Layout', I get the "Add & Arrange Page Elements' page. This includes the Nav bar, Blog Archive, Blog Post, About Me and the title blocks. But there is NO option to add another Page Element, as required when I want to include a counter on my template.

    ReplyDelete
  8. What template are you using? Don't sound like a standard Blogger template.

    Maybe you should add or alter this bit of code

    showpageelement='yes'

    to the relevant section of your template. See post Blogger Beta: How to add Adsense ads or "stick post" above the posts
    or
    How to add a graphic to your Blogger Beta Header
    to give you some ideas.

    Peter
    Enviroman Says

    ReplyDelete
  9. Anonymous12/18/2006

    Bingo! Figured it out. Thanks a million Peter. Your response time is fantastic. The problem was exactly as you pointed out. Showpageelement was set to "No"... changed this to yes, and Bingo. All sorted :)

    ReplyDelete
  10. Anonymous1/13/2007

    Hi Peter

    Stumbled upon you blog a few days ago. Because of it, I've now changed my blog to the 3 column format. Thanks to you and Stavanger and rest of people who created the templates.

    I've written a post in my blog of this. Here it is :
    http://elainepgl.blogspot.com/2007/01/3-column-blogger-template.html

    ReplyDelete

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