Cookie Consent by Free Privacy Policy Generator website the pluto diaries: tutorial translated to english: how to style static pages on blogger

Translate


Book It!

Share on Goodreads

February 9, 2024

tutorial translated to english: how to style static pages on blogger

 Demo

On the Blogger dashboard, access the menu “template >> Edit HTML >> Expand widget templates”.
Copy the code below and place it before </head>

<!-- Static page styles Home -->
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, #blog-pager, .post-footer, .post-header, .feed-links, .sidebar, #sidebar-wrapper, #comments, .footer-outer, #footer-wrapper { display:none; }
#main-wrapper{width: 950px; float:none; margin: 0 auto;}
.main-outer{width: 950px; float:none; margin: 0 auto;} /* template designer*/
.post{width: 900px;margin: 0 auto;}
.post-outer{width: 900px;margin: 0 auto;padding:20px;} /* template designer*/
</style>
</b:if>
<!-- Static page styles End -->

Understanding the code:
In the code above, all elements found on the 1st line will not appear on static pages. Everything you want to HIDE on your static pages must be contained in the code, the classes(.) or id(#) and always separating the elements with commas. The “ display:none ” command is used to hide elements.

Note that in the code, static pages will appear as follows:

  • no sidebar – #sidebar-wrapper (=minimal templates), or .sidebar (=template designer).
  • no navigation links old and recent posts – .blog-pager (=template designer), or #blog-pager (=minimal templates).
  • no feed links or ATOM posts ( .feed-links ),
  • no footer column – #footer-wrapper (=minimal templates) or .footer-outer (=template designer).
  • without footer in the post ( .post-footer ).

The post column – .post (=minimal templates) or .post-outer (=template designer) – will take up a total width of width:900px .
The total column of the posts area (#main-wrapper and .main-outer ) will occupy a width of width: 950px .
Don't forget that you must edit the width according to the width of your template.

In the Model Designer templates, the total column of the posts area is represented by: .main-outer , and the post area is represented by .post-outer, in the code above, I included both.

If you wish, add more elements to be hidden on your static pages, according to the elements contained in your template, but always including them in the 1st line, separating each element with a comma.
And don't forget to edit the width values ​​that are in the code, as the values ​​I added only serve as an example.

I recommend that you read the article: Basic Elements of Blogger and its variables to learn more about some of the main and most used variables in Blogger.

No comments:

Post a Comment

vote on this post

🍰