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
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.
- Log into your Blogger account and create a new post.
- 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.
- 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.
- Click the “Post Options” link at the bottom to display additional options.
- 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.
- Click the “Publish Post” button at the bottom to save the post.
- View you new blog list post, and copy the URL from the address bar. We will need this URL later, so keep it handy.
- Next, click the “Layout” tab at the top of the page.
- 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”.
- Clear the “title” option so there is no text in the edit box.
- Edit the remaining options to your preference as everything else won’t effect how to display the blog list.
- Once you have changed the options, and added blogs to the list, click the “Save” button to add the blog list to your layout.
- 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.
- Click the “Save” button to save your current layout.
- Now we will need to edit some code. Click the “Edit HTML” option at the top of the page.
- Check the “Expand Widget Templates” checkbox to view all the HTML code for your template.
- Search for “bloglist” until you find a line similar to:
<b:widget id='BlogList1' locked='false' title='' type='BlogList'/>
- 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]"'> - Now we need to close the if statement, so scroll down, until you find:
</b:widget>
- 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> - 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.
Blogger Blog List - Post Settings
(Click to enlarge.)
Blogger Blog List - Configure Blog List Gadget
(Click to enlarge.)
Blogger Blog List - Location of Blog List Gadget
(Click to enlarge.)
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.
38 Comments
Hey, thank you for this post, its really nice!
Hi Paul,
your Tutorial is very helpful for my blog, thanks bro!
thanks for this useful tip….i’ve been searching for the blogger’s bloglist code everywhere but no luck…luckily i found this article so now i can have my blog list on a special page….
but my problem now, the gadget is located under the post footer as you can see HERE
I want to create my post as a static page. What I mean is everytime if some one visits my site, I want only one post to always come. Other pages should not come. Right now I am always seeing the latest posts appear on my home page. I want one of my post . Please help me how to create a static post in my home page..Thanks in Advance
Hi paul, your article is very helpful for my blog, thanks
Hi paul thanks for the article, this is very helpful in my blog
Hi Paul , Thanks for given guidance me.
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
Twitter: miss_bb
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!
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!
Twitter: guruscript.com
Thanks for this great tip. I had the same problem as some others where the blog list disappears altogether after completing all of the steps. What fixed it was to remove the brackets that surround the webpage URL. I had copy/pasted this piece of code from the instructions…
…and then placed my URL where it should go. I didn’t know you were supposed to remove the brackets so it looks like this…
…but that’s what fixed it for me.
Now, I am still having the same problem a couple others mentioned about the footer being on top of my BlogList and I don’t know how to fix it properly. For now, I just went to the Layout page and shifted the “BlogList” gadget up on top of the “Posts” gadget, so at least it is above the footer now. Only problem is the title of the page/post is now under my blog list, but it looks better than the footer being above the list.
OK, looks like the snippet of code didn’t show up in my first comment. Maybe this will work…
[removed these brackets from code when inserting web address here]
Hope this helps.
Hi Paul,
Thanks for the tutorial. That is an exactly feature I would like to include in my blogger. But as I have a similar problem as some people experienced here. After I followed your step, the blog list was gone, but it didn’t appear in the static page either. I stepped into template (html), the widget is there:
….
Any suggestion would be very appreciated!
Thanks,
Ming
We still can’t quite believe that I could possibly be one of those reading through the important tips found on this blog. My family and I are seriously thankful on your generosity and for presenting me the advantage pursue my chosen career path. Thanks for the important information I acquired from your web site.
Twitter: guruscript.com
I am not sure what I shuffled around to get this to work. I had several blog lists on my blog. Blogger seems to name them sequentially “bloglist1,” “bloglist2,” etc. When I deleted the bloglists listed sequentially before the one which I wanted to be static it seemed to appear.
Weird…but at least I have it how I need it now!
Thanks,
Shelley
Hi Shelley, I’m glad you got it to work.
Paul,
Thanks for the clear tutorial. I seem to be having a problem which others have experienced. I was able to complete all of the steps successfully until step 17. The blog list appeared at the end of my posts on the homepage; however when I edited the html so that they would appear only on the specified page, the bloglist did not appear in either location.
I have tried following the steps again and am not sure what I have missed.
Thanks for your help.
Shelley
Thank you so much for this tutorial. I just followed your instructions and got my blog list as a tab for my blog.
Hi Paul,
Thanks for this tutorial. Helped me a lot.
*listed as a post (not page)
I tried to do this but when I previewed my page the gadget had disappeared from the bottom but the page was still listed as a page. any ideas what could have gone wrong?
Also, will the page be added to the list of pages that go across the top of my blog under the title, or somewhere else on the page?
Also, just as a suggestion, is there any chance you could change the type (bold/colour) of the elements that need to be changed in the code (such as the ‘insert url’)? I missed this first time round.
Thanks for a great blog!
thanks paul
No problem, glad I could help.
@Paul Salmon
Yea that right
i really enjoy this, thanks for sharing this information.
I have been playing with this on my test blog. Thanks for sharing the hack. My only question is – how do I get the post footer to not show up before the blogroll?
I have the same question too.
Hello,,
Thanks for putting this out here, I’ve been able to do this except I cannot get it to not show the blog list at the end of the post…I’ve added the page URL but it still wants to show the list on the main page..what can I do to fix this??
thanks
Ronda
Hi. I’ve tried a few times but the codes didn’t seem to work and I don’t where I did wrong. I mean I followed your every step. Maybe there is something there that I don’t really get like the part where I have to put the URL of my blog list post. Could you kindly show me how should the URL looks like?
I wonder is this page can be submit as sitemap? Thx buddy for sharing this.
Probably not, as sitemaps are usually a specific formatted XML or RSS feed.
the gadget exist, but doesn’t appear
That would mean your “if” statement is preventing the blog list from appearing. Ensure you have copied the URL of the post properly in step 18.
I did all the steps…. and when I put the if tag above the includable tag , the blog list disappeared
Does the blog list gadget still exist in your template, or has the gadget gone too?
Hi!! I did like you said….and I repeat 3 times, but when I close de tag, de blog list desapears
Which tag did you close that caused the blog list to disappear?
Hi Paul,
Thanks a lot for your wonderful site. I am new to blogger and am tweaking my blog layout to make it a little more presentable. I must say your site provides excellent information in the best presentable manner.
As you know blogger allows one to make pages. I followed the steps you mentioned very carefully but somehow the page I have now published has no blog lists. The blog list as shown in the layout snapshot you have provided is same as what my layout page currently looks like. I have left the page as it is for now. I will only remove it once if you could suggest me a way to post my blog list in the page.
For you kind information I am using Intense debate comment widget. I have disabled basic blogger comments form. Please let know if I need to provide any more details.
Kindly guide me as in where I need to make amends.
Thank you very much,
Naresh