How to create static home page for Blogger based web site

Sometimes we want our blogger based site to display static  (permanent, fixed) content on front page. By default blogger displays several last posts.

There are two options:

1. Create static home page using regular post.
2. Create static home page using Text widget.

First option can be very simple.

1. Create post (Posting –> New Post) that we want to display on home page.
2. Go to Design –> Page Elements -> Blog Posts widget –> Edit. Number of posts on main page enter 1. Uncheck all options below. Save.
3. Go to Settings –> Archiving. Choose “No” for Enable post pages. Save.

In most cases that is all.

Possible problem that our loved template hardcoded to display only excerpt (summary) of post on front page. In this case we need to edit template manually. We do not fear.

1. Go to Design –> Edit HTML. Look for code like:

      1: <div class='post-body entry-content'>

      2: <b:if cond='data:blog.pageType != &quot;item&quot;'>

      3: <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      4: <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

      5: <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

      6: </b:if></b:if>

      7: <b:if cond='data:blog.pageType == &quot;item&quot;'>

      8: <data:post.body/></b:if>

      9: <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>

     10: </b:if>

     11: <div style='clear: both;'/> <!-- clear for photos floats -->

     12: </div>

  2.   Change it to

   1: <div class='post-body entry-content'>

   2: <data:post.body/>

   3: <div style='clear: both;'/> <!-- clear for photos floats -->

   4: </div>

(Code in another theme can be slightly different.) Voila. Done.

Option two. Create static home page with Text widget.

1. Go to Design – > Page elements –> Blog posts widget –> Edit. Enter number of posts =0.

2. Click Ad widget and choose Text. Enter content you want to display. Title leave blank.

3. Place Text widget just before or after Blog posts.

4. Tricky one: make Text widget to be displayed only on home page.

•     Go to Design –> Edit HTML. Look for code like:

   1: <b:widget id='Text1' locked='false' title='' type='Text'>

   2: <b:includable id='main'>

   3:   <!-- only display title if it's non-empty -->

   5:   <b:if cond='data:title != &quot;&quot;'>

   6:     <h2 class='title'><data:title/></h2>

   7:   </b:if>

   8:   <div class='widget-content'>

   9:     <data:content/>

  10:   </div>

  12:   <b:include name='quickedit'/>

  13: </b:includable>

  14:  

  15: </b:widget>

•     change it (add conditional statement) to:

   1: <b:widget id='Text1' locked='false' title='' type='Text'>

   2: <b:includable id='main'>

   4:   <b:if cond='data:blog.url == data:blog.homepageUrl'>

   5:   <b:if cond='data:title != &quot;&quot;'>

   6:     <h2 class='title'><data:title/></h2>

   7:   </b:if>

   8:   <div class='widget-content'>

   9:     <data:content/>

  10:   </div>

  11:   </b:if>

  12:   <b:include name='quickedit'/>

  13: </b:includable>

  14:  

  15: </b:widget>

We just added conditional statement around widget content:

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

     …. widget content…

</b:if>

Summary. The first way (with regular post) seems to be more simple. In most cases it is not required code editing. Example of site with static home page with regular post. But in some cases  second technique with Text widget can be useful too.

Filed under: blogger

Like this post? Subscribe to my RSS feed and get loads more!