Removing Unnecessary Stuff from Static Page.

If you are making forum in static Page your widget or sidebar are making fussy to looks.Although Blogger has allowed 20 static page can be created it is similar to post Page then what's the difference between static and post page.Today we are going to make static Page different looking than other post page by removing unnecessary stuff like sidebar,widgets etc..We can also say we are going to make static page clean fresh etc..

Styling The Static Page with CSS and Conditional Tag.

  1. Go to Blogger.com
  2. Click on Design or Template
  3. Click on Edit Html.
  4. Find
    • <body> for layout Template.
    • <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> for designer Template(Blogger Default Template).


  5. Add the Following code just under it.
    <!-- Static page styler BloggerSinker.blogspot.com Starts-->
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style>
    .blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
    #main-wrapper {width: 90%; float:none; margin: 0 auto !important;}
    </style>
    </b:if>
    <!-- Static page styling End by BloggerSinker.Blogspot.com-->
  6. If You are Using Designer Template then replace line 5 of code with this.
    .main-inner .columns {width: 90%;padding-left:0 !important;padding-right:0 !important;}
  7. Where
    • Line 2 and 7 is conditional tag (Which only appears in that page—Here:Static Page)
    • Line 3 is the CSS Styler (No need for You) and Line 6 is end tag of line 3.
    • Line 4 are the stuff which is removed in static page because we have used “display:none” CSS.Here we have removed pager,footer,feed links,sidebar.
    • Line 5 is the CSS Styling for making the content are smaller and wide-ner.
    • If you want to add background color in static page then add background-color: HTML Color Code;. in line 5 after { .Replace HTML Color Codeand getting from Here.It should looks like this in line 5 .
      #main-wrapper {background:HtmlColorCode;width: 95%; float:none; margin: 0 auto !important;}
      


  8. If you don’t want to display widget in Static Page then add before line 6(Before </style>).
    #WidgetId  {display:none!important;}

    Replace WidgetID with your own
  9. If You have any problem Replace with This.


Note:Conditional Tag is essential otherwise you may mess your Template.

Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.

No comments:

Post a Comment

 
back to top