One of the reason why WordPress is better than Blogger might be because of Static page also.As in WordPress we can style and add different layout easily but what about blogger.Is it possible.Yep! It is by using Conditionals Tag.Visit Contact Page of Blogger Rounder you can see the clutter free static Page.
Before going ahead you need to know that what is clutter free static Page.It is the page in which sidebars,footers,widget are excluded.In this tutorial we will exclude those sidebars,Widget using Display:none CSS Declaration.Lets go ahead.
Finding the layout which is to be excluded.
The main goal is to make the simple and awesome static page so its your work to identify which part should be excluded in CSS Unique ID and Class if you want to exclude widget or sidebar then you can find CSS ID And Classes easily by learning from here.Not only widget you can exclude other layout unique Id and Classes.
Constructing Clutter Free Static Page.
After identifying you can exclude the widgets,contents etc. by here.
- Go to Blogger Dashboard>Template>Edit HTML
- Find
<bodytag. - Just below of that tag add this codes that match with your Template
- For Layout Template
<!-- Clutter Free Static Page Styling Stats--> <b:if cond='data:blog.pageType == "static_page"'> <style type="text/css"> .sidebar,.lowerbar,.footer { display:none !important; } #main-wrapper { width: 98%; float:none; margin: 0 auto !important; } </style> </b:if> <!-- http://bloggerrounder.blogspot.com --> <!-- Clutter Free Static Page Styling Ends --> - For Designer Template
<!-- Clutter Free Static Page Styling Stats--> <b:if cond='data:blog.pageType == "static_page"'> <style type="text/css"> .sidebar,.lowerbar,.footer { display:none !important; } .main-inner .columns { width: 98%; padding-left:0 !important; padding-right:0 !important; } </style> </b:if> <!-- http://bloggerrounder.blogspot.com --> <!-- Clutter Free Static Page Styling Ends -->
- For Layout Template
- Where
- In Line 4 add the CSS ID Or Classes separated by comma which is to be excluded.
- In Line 9 change width of static page in percent or Pixel as your wish I would recommend to use measure it for measuring width.You can learn from here.
- Finally click on Save Button.
Enjoy clutter free static page.Here is one screen shot of clutter free static page
Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder's by RSS feed or email updates.
0 comments on "Constructing Clutter Free Static Page at Blogger.":
Post a Comment
We Love To Hear Comments from You.Comments are Welcome.You can comment here regarding this Post.If it is not related with the post you can ask a question by Contacting Us.Before Comment Please Subscribe To our RSS or email updates.Publishing Spam Comment is Not allowed.If you want to Add Code then Please Encode it.
Simple Tags like <a> ,<strong>,<b>,<em> and <i> are allowed for preventing spam