Blogger has evolved, introducing static pages that are ideal for crafting "About Me" and "Contact" pages on your blog.
However, by default, these static pages inherit the same layout as your homepage or regular posts.
If you crave unique, distinct static pages, you're in luck! In this up-to-date tutorial, I'll walk you through the process of applying conditional styling to your Blogger static pages, enabling you to personalize their appearance.
This way, they'll resemble dedicated pages rather than ordinary blog posts. We'll also explore how to style individual pages independently, granting you creative freedom for each page.
Adding Conditional Styling
Let's kickstart the journey to customize your static pages' layout and style:
1. Begin by heading to your Blogger Dashboard and locating the "Design" section.
2. Click "Edit HTML" to access your blog's template HTML code.
Pro Tip: Before any changes, safeguard your template by clicking "Backup" on the theme modify options
3. In your template's HTML code, pinpoint the <body> tag. Its location may vary based on whether you use a Layout or Designer template.
For Layout templates, search for the '<body>' tag.
For Designer templates, look for '<body expr:class='"loading" + data:blog.mobileClass'>.
4. Copy the following code snippet and insert it immediately after the <body> tag:
<!-- Static page styling Start-->
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important; }
#main-wrapper { width: 95%; float: none; margin: 0 auto !important; }
</style>
</b:if>
<!-- Static page styling End -->
5. For Designer templates, replace the highlighted code snippet with:
.main-inner .columns { width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
This code expands the post area to fill space emptied by sidebars. If needed, determine your header or header-wrapper width and apply it here.
The code snippet above uses CSS rules within <style>...</style> tags to alter static page appearance:
The Green Highlight: Hides the blog pager, blog footer, post footer, feed links, and sidebar from static pages.
The Grey Highlight: Adjusts the main content area's width and alignment to occupy sidebar vacated space.
If you use any of Sora or Piki template use this tested and modified code I currently use on this site.
<!-- Static page styling Start--> <b:if cond='data:blog.pageType == "static_page"'> <style> .item #main-wrapper{ width:100% !important; float:none; margin: 0 auto !important;} .item #sidebar-wrapper{display:none !important; width:0%; } .item-post .post-body { width: 100% !important; display: block !important; padding: -1px !important; } </style> </b:if> <!-- Static page styling End -->Identifying and Adding Your Elements
To customize further or remove extra elements, identify their IDs or classes in your template code:
1. Open your template code and find elements for modification or removal (divisions <div>, sections <b:section>, or widgets <b:widget>).
2. Each element has an assigned ID and/or class; note these IDs and classes. E.G " id="an-id", class="a-class".
3. To remove an element from static pages, add its ID or class to the selector list in line 4 of the code snippet mentioned earlier.
π¦Ή IDs, prefix with "#" (hash).
π¦Ή For classes, prefix with "." (dot).
Example: To remove a widget with ID "HTML4," add "#HTML4." For a sidebar with class "sidebar2," add ".sidebar2."
Styling Pages Individually
While conditional styling applies to all static pages by default, there are scenarios where you'll want unique styles for specific pages:
1. Visit your Blogger Dashboard and go to "Pages."
2. Click "Edit Page," select the page needing custom styling (like "About Me"), and enter HTML mode in the editor.
3. Insert your CSS code at the top of the page content:
<style type="text/css">
.content-inner { background-color: palegreen; }
</style>
YOUR STATIC PAGE CONTENT HERE
In this example, a CSS rule changes the page's background color to pale green. Modify this code for your desired styling.
Reminder: This page-specific code won't affect other pages' styling.
Previous codes shared can also be used to style each individual pages differently. See how have done on this site service page styles different from about page and from skill page and so on.
To style each individual page just make sure you use the <style>' tag. Css should be placed in it
Check out this code to hide sidebar on pages
<!-- Static page styling Start--> <style> .item #main-wrapper{ width:100% !important; float:none; margin: 0 auto !important;} .item #sidebar-wrapper{display:none !important; width:0%; } .item-post .post-body { width: 100% !important; display: block !important; padding: -1px !important; } </style> <!-- Static page styling End -->With these steps, you can effortlessly personalize the layout and style of your Blogger static pages.
Whether you're eliminating elements, adjusting content area width, or crafting unique page designs, you now possess the knowledge to infuse your static pages with a distinct and professional appearance. Embrace the art of blog customization!
