How to add Static Pages to a Blogger Blog (UPDATED)

A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. Now we will be able to manage the pages with more flexibility. For example, we can publish, delete or change many of them to draft at the same time - which has just the same function as the old Don't show option.

Among the options that we can find by hovering over a page and which we can see in the screenshot below are:

Edit: To access the editing panel and to edit its contents.
View: Open a new tab with the actual page.
Share: Share it on Google+ (which was not possible before)
Delete: remove a page.

In order to create a page, we need to open the pages editor from the button that says New Page. Almost every option tells us its function.

How to add a Web Address in the Pages widget

Many Blogger users wanted to know how can we add other web addresses, so that they display in the list of the Pages widget, since this option no longer appears in the "Pages" tab?

Well, now we will have to open the settings of the Pages widget by going to Layout, then click on the Edit link in the widget / gadget for Pages (if you don't have the Pages gadget, just click on the Add a gadget link and select "Pages" from the pop-up window). And from there, we will find the option that says: Add link page and we will have to type the Web Address in the second field every time we want to add a new page from a specific address or URL (see the screenshot below).

Another cool feature that has been built is that now it will be possible to add a search description, and in that field to add the text that we want to appear in search results. Until now, this option has been available only for blog posts.

This option will appear once you enable the Enable search description? option by choosing Yes. This will show up on "Meta Tags" by accessing the preferences for the search engines: Settings > Search preferences > Meta Tags > Enable search description?

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.

The contact form for Blogger has the following features:

• Field for the user name
• Field for email
• Field for the message (textarea)
• Submit Button

Screenshot

 The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.

How to Add Contact Form to Blogger

To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget.

Styling Contact Form

As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

This is how it will look like after applying the style:

To add this style, go to Template > Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (press CTRL + F to find it):

How To Add Contact Form In A Static Page

First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

After you have saved the template, go to Pages and paste the following code into a new blank page with the title you want:

 <div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Messages will be sent to the same email that you have registered in Blogger.

Here's a demo page where you can test it (it is an account that I don't use, so don't expect reply).
That's it! If you have any questions or comments please post below.

How to Add Different Backgrounds In Blogger Pages

In the last tutorial, we have seen how to add different backgrounds in Blogger posts. This tutorial, however, will show you how to apply a different background to the body of the template that will change when navigating to specific pages, thus making each of these pages have their own unique design and personality.

To see a demo, visit this demo blog and click on the menu tabs:

Demo Blog

Apply a Different Background in Blogger Posts/Pages

Step 1. Log in to your Blogger account, then go to Template and hit the 'Edit HTML' button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box

Step 3. Type this tag insite the search box and hit Enter to find it:

</head>

Step 4. Just above the </head> tag, paste the following CSS style with the b:if conditional tags that will apply the style to the chosen page:

<b:if cond='data:blog.url == &quot;http://address.com/page-name.html&quot;'>
<style>
body {
    background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}
</style>
</b:if>

Custom Background in a Specific Page

- change http://address.com/page-name.html with the URL address of your blogger post or page where you want to apply the custom background. If you don't have a domain, your blog might be redirected to a country specific url; in this case, you may need to edit the blog address so that it ends with .com

- change http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG with the direct link of the background image that you want to use.

Step 5. Hit the 'Save template' button and you're done. Now, visit the page and check to see if the background has changed. If you want to change the background in another Blogger page, repeat the steps from above.

How to Create Static Pages in Blogger

What are Blogger static pages? 

Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.

How to Create Static Pages in Blogger.

Step 1. Log in to your Blogger Dashboard

Step 2. Click on Pages

Step 3. Click on New Page - Blank Page

Step 4. Type the title and write the page's content.

Step 5. Before publishing it, click on Preview to see how it will appear on your blog.

Step 6. When you have finished the editing, click on Publish button.

Step 7. Now you have 3 options:

1. Keep it as nav menu below header - Top tabs
2. Display the page in your blog's sidebar - Side Links
3. Add the page's link manually to your template - Don't Show

Step 8. After you have chosen where the page will appear, click on the Save arrangement button

And now you're done!
Now you have owned the static page. If you want another static page, just repeat the steps above.

Note: if you have opted for Don't show option: go to Pages again and right click on the page's title and select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.

UPDATE: Blogger made an update recently to the way that pages are added to blogs. Here is an updated tutorial that will walk you through the new process, step by step: How to Add Static Pages to a Blogger Blog

Or you can watch this video tutorial below: