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

61 Responses to “How to create static pages on blogger”

I've been wanting to do this...yet I can't seem to understand the codes here yet...LOL Let me read and re-read this one.

Thanks!

Anonymous

May 26, 2009

you can not be a teacher! :D lol its a little confusing!

@Anonymous
whats confusing ?

Did not got it.
www.techieway.blogspot.com

@Sandeep
did not got what ? if you disable comments on a post and wrap the following code

<b:if cond='data:post.allowComments'>
content here will not be visible if the post doesn't allow comments
</b:if>

around things you don't want to show within that post they are not shown

thanks heaps for the tut..i've been looking for this for ages..can't wait to give it a go..

What do you mean by "wrap the post date?" What does wrap mean?

@Jeff Branch
if you nest or wrap those tags around the post date then create a post and disable comments for that post the date will not be shown when you visit that post for example

<b:if cond='data:post.allowComments'>
<!-- only show the date if the post allows comments -->
<data:post.dateHeader/>
</b:if>

I did it...and I did it successfully at first try and in my other sites as well!

Now...it's not really confusing as it seems at first look.

The first codes were just shown to us to understand how it works...then the in the following codes, the ones in red were the one we need to add to our code. The conditions there (codes in red) will function everytime we make a post and disable funtions in the foot of our post like author, tags, date, etc.

Thanks so much!!!

@Mariposa
yes thats right I'm glad you was able to follow my tutorial

Hi Lawny,

Could you please show me how to make the author name,date & time post go next after the post title?

Example:

"How to create static pages on blogger" by Lawny on 23 June 2009 02:22am.

please help!

@Ezri
i might write a post showing how you can customise the post template when i get time however i cant promise you

Impressive! You're rocks! It helps me to make my blogspot blog look more pro. Thanks for this.

I dont get it i cant find some of the codes you said there would be therefore i am mortally CONFUSED. i just dont understand!

Reanna4eva.

@Reanna4eva
make sure you have expanded the widget templates otherwise you will not see the codes such as <data:post.dateHeader/>

Oh wow! Thank you force this tutorial. I'm really looking to renovate my blogs and make them more functional.

Thanks again.

great blog .. i'll try it now ,it looks very nice ...thanx

This is the best static page article, the others on the internet didnt explain how to remove author.

I have a different template that doesn't use the data:post.dateHeader/ tag. I've tried wrapping around any tags that look similar (i.s., have "date" in them), but nothing seems to get rid of the date. I have everything else worked out.
Any advice?

@Evangeline
where did you download the template from ? the designer may of removed the code

Figured it out! My code used timestamp instead of dateHeader, since the date is on every post. Thanks for a great trick!

@Evangeline
I'm glad you was able to figure it out

Hi. I found this tutorial a little tricky to follow, as I was just guessing which bits of code I had to wrap, but I did manage to set up the page and delete most of the stuff I didn't want. I am still left with this stuff though, and I don't know how to get rid of it:

0 Response to "Email our teacher"
Newer Post Home
These bottom two are links. There wasn't a place in my Post Options to allow or not allow backlinks.

I am using a converted Wordpress template.

Hope you can help.

@Catherine
the template you are using will of been customised so you may need to search for the codes they will be in a different place

Lawny: Help, help, help .....please!!

My blog has a main page where only the welcome message is displayed. I have created tabs for "static pages" (Memories, Recipes, Photos, Tips, etc.) on the menu bar, but am unable to post to those pages. If you click on one of the tabs, the correct page is accessed but when I create a New Post - it goes to "cyber space". I can go to Edit Post and click view and see the post, but am unable to get it to the correct page.

My blog is msporch.blogspot.com. I would appreciate any advice that you have time to share.

Thanks much,
Sarah

@Sarah
it sounds like you have either put the tags in the wrong place or deleted them

I attached the tags, using HTML, as a gadget on the layout. They haven't been deleted - as stated earlier, I can access the page but am unable to get the post attached to the page.

Should the tags be elsewhere?

Sarah

@Sarah
I know the navigation links haven't been deleted when you click the navigation links on your blog only the post title is displayed on the page because you have either deleted the <data:post.body/> tag or put it in the wrong place so i recommend you read the tutorial more carefully also i can't really help you as i'm too busy working on other sites unless you want to hire me

Awesome, thank you so much!

Thnx Frnd for elaborating ,
I have created a multiple static page site on blogger have a look and give feedback :D

http://orevapowersaver.blogspot.com/

Hi Lawny,
can we remove the following links to appear below every post???
--
1. Newer Post
2. Home
3. Older Post
???

@AviD
they already appear below every post if you want hide them use following CSS code

#blog-pager{display:none;}

errrr, i can't get it right. Please help. Can you please email me at madame_k@ymail.com? I look forward to your response.

@Anonymous
sorry i don't have time

THANK YOU!! A little confusing to follow at first, took me several tries, but I did it!!

If you could answer this , I would be very grateful :) I deleted everything like you said, but the "reactions" still remain. Any idea where to find tehm in the HTML code and what I need to insert to get those reactions to go away?

My blog:
http://diaryofamadwomann.blogspot.com/

And the static page:
http://diaryofamadwomann.blogspot.com/2010/01/hey-welcome-to-my-blog-my-name-is-kelly.html

Very good article. I think that if one reads the article and Mariposa's 2nd comment a couple times, it will make sense.

The big challenge for some will be knowing where to find the code on the the edit HTML page that they want to turn off by using the code you showed us in your article.

@k
i cannot see the "reactions" widget below your static page

Your punctation is what is confusing everyone. Put periods "." at the end of your sentences, and break up your run-on sentences, like this one, with a comma ","

Also, using CAPITAL LETTERS at the beginning of a sentences denotes the beginning.

If you used these three things, this tutorial wouldn't have taken me 3 times to figure out, but thanks for the information anyways.........

@Angel
maybe i was in a rush the main thing is that you understand how the code works anyway i'm going to update this tutorial when i get time

i'm lost. i have static pages setup, and added a new theme, and i had the timestamps not show up anymore. once i went to the new theme, they came back, and i still cannot find out where to turn that feature off?

do you know which .css file i need to go into and delete to remove the timestamp from just pages?

thanks

@kevin
to remove the post timestamp from static pages make sure you have expanded the widget templates then look for the following code
<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>

modify it until it looks like

<b:if cond='data:post.allowComments'>
<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>
</b:if>

that way the timestamp will only appear on post's which allow comments

How do you remove wigdets on the static page because they are not part of the b:include?

How to remove widgets from a static page? They are not including in the b:if cond code?

Great post. Thanks for explaining.
Was searching this for quite some time.

Hey Lawny,

Is there somewhere to put the "allowComments" condition so that the blog-pager links (Newer Post, Older Post, Home) still remain on the normal posts but not on the "static pages"?

I notice you have been able to do this on this website on the Privacy Policy and Disclaimer pages.

I do not understand what you mean when you said to AviD to use the CSS code #blog-pager{display:none;}

Is this what you have used on this website?

@Nick
first you need to create a post then copy the url and add it to the if conditional tag for example

<b:if cond='data:blog.url != "http://BLOGURL.com/2009/10/test-post.html"'>
content here is shown on all pages apart from the
post page given in the conditional tag above
</b:if>

so you could wrap that code around widgets you don't want to show on the page given in the conditional tag


@Marc
Expand the widget templates and look for the following code

<b:include name='nextprev'/>

modify it until it looks like

<b:if cond='data:post.allowComments'>
<b:include name='nextprev'/>
</b:if>

Okay, thanks Lawny.

I had previously tried this (what you recommend) before but it didn't work, and it still doesn't work. It affects all posts when I wrap "nextprev" with the "allowComments" condition. Don't know why.

So I tried using the URL as the condition instead (like you point out to Nick), and it worked.

Thanks.... you're a champion.

Hi Lawny,

I took your advice and could not turn off my ad widget. Could you explain where to start and end with wrapping code around widget.

Thank you,

Nick

Lawny,

I tried your suggestion and I was not successful. I do not think that I usnderstand how to wrap the code
and correctly.

I would appreciate it if you gave me a more specific example on where to place the code.

Thank you,

Nick

Thanks for your tutorial.
I have been able to remove the comments and time stamp but I couldn't manage to remove the email icon from my static page.

I think I found the code for it but I am not sure where to place the tags.
I have tried several positions but I always get an error message.
Can you tell me how to do it properly?

Thanks

@Nick
it depends where you are using the code

@Phil
try the following code

<b:if cond='data:post.allowComments'>
<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>
</b:if>

Bingo! Thank you Lawny!

Did I tell you how much I love you? I was about to make a privacy policy page, but it would show up in the homepage as new post. Thank God I found this post!

-Kai Lo

hey thank you Lawny :)

hi, the code is working. although i think it is not the best way to have static pages. it would be better if you set the date of these posts to something far in the past and make the if statement something like:











Now, you have to set the post date for all your static pages to something before 1 Jan 1981. In this way you could have static pages with comments and dynamic without comments. Which is better then you solution.

Unfortunately, I coudn't find a way to create
the date object to compare the post's date to (in this example - 1 Jan 1981). The blogger docs don't say much about the proper way to compare dates in condition statements. Do you know how to do it?

Also, another problem with these tricks is that our "static" pages appear in the archive widget. no big deal, but if you click on the month or day link in it, you will get an empty list, because blog.pageType is not 'item' in this case. an empty list is not exactly what one expects. to solve this you have to remove the static pages from archives! i'm working on it now. gonna post something soon. i'll be very glad if you could help me with the date thing though.

Dude, I just found that all our efforts are absolute pointless!! There is an official way to create up to 10 static pages in blogger. Go to Posting -> Edit pages in the admin interface.. I can't believe I find it now after all the efforts to fix this :)) Cheers!

@Петко
my post mentions at the top that pages are available via blogger

Everything was as you described until I tried to preview it and it came up with:

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The element type "span" must be terminated by the matching end-tag"".

@Frank
It means that you have forgotton the closing </span> tag anyway why bother with this, pages are available via blogger go to posting > edit pages then you can create upto 10 pages

Thanks. Very Nice. Thanks You Admin For Sharing

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2012 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger