How to create static pages on blogger

Update Static pages now available in Blogger

In this simple tutorial i will show you how to create static pages within your blog on blogger so you can easy link to them from navigation links within your blog these could be any page you like such as "about me" and "contact me" pages.

so the first thing would be to either use a test blog or download a backup copy of your template before doing this to your blog as i cannot be held responsible if you mess up your blog.

Once you are ready go to your blog and create a new post using whatever title you want for this tutorial i gave mine the title of "About" now add your post content when you have finished click the "Post Options" link found at the bottom of the post editor see screenshot below




now we need to change the date of the post to something older than your first blog post that way it will be hidden in the archives next under "Reader Comments" click the last radio button to disable comments since we don't want people commenting on these static pages do the same for the Backlinks next publish your post and visit it note how the date, time, email post icon and posted by are all showing up and whatever else you have installed below the post footer such as social bookmarks.

Well here's how we can get rid of them on the static pages which we don't allow reader comments go to layout > edit HTML expand the widget templates and find the following code

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

now the code highlighted in red basically checks to see if we allow comments on the post if it does then the code within the tags will be shown otherwise nothing will be shown

so we need to wrap the post date, time, posted by and whatever else you don't want showing within the tags so they are not shown on our pages which do not allow comments

here's an example of the timestamp, posted by, and email icon wrapped within the tags as described above

<b:includable id='post' var='post'>
<!-- Code removed for simplicity -->
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.allowComments'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</b:if>
<!-- Code removed for simplicity -->
</b:includable>

and the post date


<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<!-- code removed for simplicity -->
</b:includable>

you can use those tags as many times as you like through your template and put anything within those tags that you don't want showing up on your static pages so basically we need to use these tags within the post loop

<b:if cond='data:post.allowComments'>
(normal pages this post allows comments)
comment link, email post etc .. go here
<b:else/>
(static pages post's that do not allow comments)
anything you want to show on static pages goes here
</b:if>

so now you should know how to create static pages within your blogger blog take a look at my privacy policy created using the steps described above

i hope you enjoyed reading this tutorial if you are having any problems leave your comment and let me know i will get back to you as soon as i can