Special Pages in Blogger

Remark: This post explains how to create special pages by making changes to the blogger template. As of January 2010, blogger provides a simpler way for the creation of special pages than the way explained here. This feature can be found in the blogger draft dashboard, under posting->edit pages.

Special pages are pages such as contact, feedback, or information for advertisers. The standard way to create such special pages on blogger is to create a new post. This means that readers will see date and time, labels, the post author, maybe even ads on your special page just like on a normal post. I found out recently how to create more professionally looking special pages in blogger and in this post I explain how to create them.

One of the articles I see again and again in variations on different blogs is the one about special pages in blogger. Usually the only thing it says it that you should create an article, where you omit comments and backlinks in the options. You would date back this article so it doesn't show up in the blog feed. To me this kind of special pages in blogger don't look professional enough.

The way to create special pages which allows most customization is to host them outside of blogger, however these pages would not be integrated with your blogger page layout. This week I learned about a different way to create special pages in blogger which are both professional in look and integrated into your site. I read about this first from an article in blogspot vision and I've since found similar suggestions on other blogs.

This second way to create professionally looking special pages in blogger involves linking to a page in "/search/label/" and putting a conditional in the template so that your text shows only up if the visitors go to that link. That's what the other article explained, however how to do it?

It cost me a lot of time to figure out the details to make it work but I created two special pages which you may want to see to know how these pages look like, one for advertisers and another one for feedback. In this post I explain the exact details on how to create them.

Start by thinking of a name for your special page, say, contact. The address would be then yourblog.blogspot.com/search/label/contact.

Now edit the template. In the blogger dashboard go to layout->edit HTML and mark expand widget templates. Before you edit make sure you have a backup of your template (you can make one by clicking on download template).

We need to edit inside the blog widget. Search for <b:includable id='main' var='top'>. The code within this include and the </b:includable> is responsible for showing posts. We need to create the following structure:

<b:includable id='main' var='top'>
<b:if cond='data:blog.url == &quot;http://www.yourblog.blogspot.com/search/label/contact&quot;'>

<!-- here you put the text you want to show up for your special page -->

<b:else/><!-- if not special page show post -->

<!-- don't change the code here which shows your posts -->

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

Your changes are the following:

1. the conditional <b:if ...,
2. directly followed by the text for your special page,
3. <b:else/>,
4. </b:if> before the closing </b:includable>.

  Leave the spaces in the conditional (" == "), otherwise it might not work.   Note that you leave the earlier code for the post untouched.   After these changes you should have your special page ready and once you save you should see it show up at your chosen location http://www.yourblog.blogspot.com/search/label/contact.   As for styling, you could use the same style as for the posts. For the heading you can use <h1 class='post-title entry-title'><a href='http://yourblog.blogspot.com/search/label/contact'>Contact</a></h1> and include the rest in <div class='post-body entry-content'> and </div>.   With styling, the structure will be like this: <b:includable id='main' var='top'> <b:if cond='data:blog.url == &quot;http://www.yourblog.blogspot.com/search/label/contact&quot;'> <h1 class='post-title entry-title'><a href='http://yourblog.blogspot.com/search/label/contact'>Contact</a></h1> <div class='post-body entry-content'> <!-- here you put the main text you want to show up for your special page --> </div> <b:else/> <!-- if not special page show post --> <!-- don't change the code here which shows your posts --> </b:if> </b:includable>   If you want to use javascript within your special page, you have to convert special characters. You can use the tool at HTMLEscape.net to help you with that (choose convert special characters and <>).   Enjoy. Please tell me about your own special pages.