Thursday, 20 December 2012

Styling Blogger Static Pages

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

In some points Static pages should look different than all other posts of our blog. We all use static pages for our forms, forums and all other stuff. They all need a big space and in this tutorial i'll tell you how to apply custom style on your blogger static pages. First make sure you have some basic css and html knowledge:

  • Go To Blogger > Template > Edit HTML 
  • Search for <body>
  • Copy the code below and paste it right after <body>:

<!-- Static page styling Start-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #rsidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>
<!-- http://www.bwidgets.com -->
<!-- Static page styling End -->

Now between <style> ... < /style> add id or class of thing that you want to hide on your static pages.

You can also add background color, and so many things to style your static pages....If you're having any problems then please leave a comment.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.