Display a Blog List as a Static Page in Blogger

Display a Blog List as a Static Page in Blogger

Blogger was created to provide an easy way for anyone to create a blog within a matter of minutes. You don’t need to know HTML or CSS to write and publish posts on a Blogger blog, since the user inteface, and templates, do it all for you. While you can edit the code, if you wish, for most people it is easier to simply add gadgets and move them around.

With this ease of use comes some restrictions, such as not being able to create pages that execute code. I have managed to provide alternatives to getting around several restrictions, and today I will discuss another alternative – displaying a blog list as a static page. Doing something such as this was asked a little while ago in my comments, and while I provided a quick reply, I decided to provide a more thorough solution.

A Blog List Post

Blogger Logo

As with many Blogger solutions I have created, this one involves using a blog post to display a blog list gadget. While you can’t add a gadget to a blog post, you can make it look like you did with some creative editing.

  1. Log into your Blogger account and create a new post.
  2. If you have already created static pages in the past, then do the same for this post. If you haven’t created static pages, then follow the instructions to create a static page in Blogger.
  3. Enter a title for the page, but don’t enter any content for the page. The content will come from a blog list gadget, which you will see later.
  4. Click the “Post Options” link at the bottom to display additional options.
  5. Under “Reader comments”, select “Don’t allow”. The reason we don’t want comments is because they will disrupt the layout of our blog list page.
  6. Blogger Blog List - Post Settings

    Blogger Blog List - Post Settings
    (Click to enlarge.)

  7. Click the “Publish Post” button at the bottom to save the post.
  8. View you new blog list post, and copy the URL from the address bar. We will need this URL later, so keep it handy.
  9. Next, click the “Layout” tab at the top of the page.
  10. Click an “Add a Gadget” link in the page element layout and then scroll down the list and click the plus sign next to “Blog List”.
  11. Clear the “title” option so there is no text in the edit box.
  12. Edit the remaining options to your preference as everything else won’t effect how to display the blog list.
  13. Blogger Blog List - Configure Blog List Gadget

    Blogger Blog List - Configure Blog List Gadget
    (Click to enlarge.)

  14. Once you have changed the options, and added blogs to the list, click the “Save” button to add the blog list to your layout.
  15. Back at your blog’s page element layout, drag the “Blog List” gadget so it appears directly below the “Blog Posts” gadget. Since your blog list post contains no text, just a title, the blog list will be displayed directly under your post title.
  16. Blogger Blog List - Location of Blog List Gadget

    Blogger Blog List - Location of Blog List Gadget
    (Click to enlarge.)

  17. Click the “Save” button to save your current layout.
  18. Now we will need to edit some code. Click the “Edit HTML” option at the top of the page.
  19. Check the “Expand Widget Templates” checkbox to view all the HTML code for your template.
  20. Search for “bloglist” until you find a line similar to:

    <b:widget id='BlogList1' locked='false' title='' type='BlogList'/>

  21. Below the line shown above, you will find an includable line. Right after that line we need to include the following:
    <b:if cond='data:blog.url == "[URL of your blog list post]"'>

    so it looks like:

    <b:includable id='main'>
      <b:if cond='data:blog.url == "[URL of your blog list post]"'>

  22. Now we need to close the if statement, so scroll down, until you find:

    </b:widget>

  23. Directly above that line is the end of the includable tag, which you should preceed with the closing if tag, like so:

      </b:if>
    </b:includable>

  24. When the changes have been made, click the “Save Template” button to save your template. If all goes well, when you view your blog list post, you should see a static page that displays only the post title with the blog list gadget.

For an example of what a blog list page looks like, please check out the blog list static post on Blogger to the Limit.

The above steps provides a compromise to those that want to display a static blog list page on a Blogger blog. The steps simply create a blank post that will only contain a title. Since there is no content, the blog list gadget will displayed flush up against the post title, which is what we want.

Next we change the blog list gadget code to only display the contents of that gadget when the URL is the same as the blog list post URL. This prevents the blog list from displaying on any other page or post on the blog.

One final note, the reason we disable comments on the blog list post is because the comment box is part of the blog posts gadget. This means that if it wasn’t disabled, the page would display the title, followed by the comment box, and then the blog list. This, obviously, won’t look good so we disable the comments.

37 Responses to “Display a Blog List as a Static Page in Blogger”

  1. Hi Paul.

    I’ve been trying to edit both an static page also a bloglist (static) page, but at date it seems quite unaffordable to me.

    Surely is because of the change of programmation of the pages and widgets, specially if talking about i’m using a dinamic view.

    Main problems are:

    It doesn’t matter what i did to the Archive Widget, there’s no way to hide that first-year-post (in my case “published” in 2012)

    Also there is no way to hide the static page from the site, and there is no bloglist in its interior.

    Can you help me?

    Regards,

    DH

  2. Drusilla says:

    Hi, every time i used to check website posts here in the early hours in the
    morning, for the reason that i like to gain knowledge of more and more.

  3. Saransh says:

    Hey, thank you for this post, its really nice! 🙂

  4. Deepak says:

    Hi Paul,

    your Tutorial is very helpful for my blog, thanks bro!

  5. ronal says:

    Hi paul, your article is very helpful for my blog, thanks

  6. ronal says:

    Hi paul thanks for the article, this is very helpful in my blog

  7. Eventista says:

    Hi..thanks os much for htis. It is exactly what I need …but somehow it doesn’t work on the site the “member” page should list all the blogs but nothing appears when I go to that page. I checked several times my html but I can’t figure out where the issue is coming from. Any help would be much appreciated.

    thanks

    Cheers

  8. Aya says:

    Thanks! I followed this tutorial once when I put my blog list to a separate page but after a few months my blog list suddenly stopped showing up. for some reason the codes I put in the HTML disappeared so I set everything up again tonight. Thanks for your help! 😀

  9. I dont suppose Ive read anything like this before. So nice to find somebody with some original thoughts on this subject. realy thank you for starting this up. this website is something that is needed on the web, someone with a little originality. useful job for bringing something new to the internet!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.