How To Customize The Look Of The Static Pages In Blogger?

This tutorial teaches how to customize the look and feel of the static pages on Blogger. This trick lets you see a completely different static page.

Customize Blogger Static Pages

In this tutorial, we are going to design a completely different layout style and look of the Blogger static pages. We can just simply say that this trick will customize your static pages to look differently than your blog post pages and home page. Before we start, we need to understand the meaning of static pages.

What are static pages in Blogger?

Blogger static pages were introduced somewhere in start of 2010. Static pages are pages in Blogger where you can place your static content, it is not the usual blog post page. The static pages can be used to show static data like your “contact details“, “about me“, “About us“, “Archive“, “Table of contents” and so on which are not generally dynamic.
Static pages look something like this:

In short, these are stand alone pages on your Blogspot blogs.


1. Create a static page if you don’t have one on your blog.
2. Customize the look and style of that static page/pages overall.
3. Remove the sidebars. If possible remove the footer and header.

Sample Static Pages:

Table of Content
Contact Us
A DEMO PAGE[Where Header, Footer and Sidebars have been removed]

Now, moving on to the tutorial.

Customize the look and style of the static pages on Blogger

Important: Backup your Blog before proceeding.

Step 1: Go to Blogger dashboard > Select Blog > Template > Edit HTML.

Step 2: Find[Ctrl+F] for <body> tag in HTML template.
Right after <body> tag paste the following code:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style>  .blog-pager, .footer, .post-footer, .feed-links, .sidebar, .comments-block, .comment-form, .comment-footer, .comments, #sidebar-wrapper { display:none !important;} #main-wrapper {width: 95%; float:none; margin: 0 auto !important;}  </style>

Step 3: Save the template.
The above code in Step 2: 
These are nothing but little bit of CSS styling under the conditional tags asking the CSS to apply only for static pages.
Here we use the CSS styling to remove blog-pager, footer, post-footer, feed-links, sidebar, sidebar-wrapper, comment form with comments.
We also increase the width of the main-wrapper to 95%.

Din’t get the look you wanted? Remove more elements from the static page!!!

The above code we used in the CSS was to a normal blog where you have a footer, posts, blog, sidebar and comments. 
If you have other widgets, menu bar navigation and headers. You can remove them as well.
Say you have a widget “Explore“.
Step1: Go to EDIT HTML > Expand the template HTML.
Step 2: In the HTML search for “Explore“. 
The HTML code would look something like this:

<b:section class='sidebar' id='sidebartab4' preferred='yes'> <b:widget id='HTML2' locked='false' title='Explore' type='HTML'>

Step 3: To hide this from static page you need to update the code as:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style>  .blog-pager, .footer, .post-footer, .feed-links, .sidebar, .comments-block, .comment-form, .comment-footer, .comments, #sidebar-wrapper, #HTML2 { display:none !important;} #main-wrapper {width: 95%; float:none; margin: 0 auto !important;}  </style>  </b:if>

Important: “#” is used when the code has “id” in it. “.”(dot) is used when the code has “class” in it.

Step 4: Save the template.

Style an individual static page

Now, you may want to style only a single static page, not all the pages in common. 
This can be done very easily.
Step 1: Go to the static page you want to do the individual styling.
Step 2: Edit the static page post.
Step 3: Go to its HTML section.
Step 4: Add the CSS for styling as:

<style> .content-wrapper{background-color:#000;} </style>

That’s it, republish the static page to see the effects.
Hope you enjoyed this tutorial. Try em on your blog and let me know if you face any trouble. Thanks for reading. Enjoy and stay tuned.

Leave a Reply