Finally Blogger has come up with the much awaited static pages feature. Blogger simply refer to them as Pages. You can create up to 10 static pages, perfect for your About Me and Contact pages.
However, a Page will look just like homepage or any other page. Would it be nice if you can change the layout, making them look more like pages and less like posts? Maybe you want the sidebar or footer removed? Well good news, you can. Look at a sample Page here, compare it with the homepage, and notice the difference. The same goes to my
SEO Tools, FAQs and
Support pages.
Okay let’s start with the tutorial,
I. Applying the conditional styling
- Go Dashboard > Design > Edit HTML.
- Back up your template.
- Find this code in your template HTML:
<body> -if you are using Layout templates, or <body expr:class='"loading" + data:blog.mobileClass'> -if you are using Designer template.
- Copy the code below and paste it right after the code step 3:
2 | <b:if cond='data:blog.pageType == "static_page"'> |
4 | .blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;} |
5 | #main-wrapper {width: 95%; float:none; margin: 0 auto !important;} |
5 | .main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;} |
- What goes into the
<style>…</style> tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we - Remove blog pager, blog footer, post footer, feed links and sidebar. This is done in code line 4.
- Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what’s your header’s or header-wrapper’s width and apply it here.
II. Identifying and adding your own elements to the code
Your elements’ Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from Blogger Sentral’s template:
1 | <div class='side-wrapper'> |
2 | <b:section class='sidebar' id='sidebar2' preferred='yes'> |
3 | <b:widget id='HTML2' locked='false' title='' type='HTML'/> |
4 | <b:widget id='HTML4' locked='false' title='Popular Posts' type='HTML'/> |
5 | <b:widget id='Label1' locked='false' title='Labels' type='Label'/> |
As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page, simply add the ID or class to the selector list in code line 4 in step 4. For an ID you need to add “#” prefix and for a class, add “.” as prefix.
For example, if you want to remove the “Popular Posts” widget, all you have to do is add
#HTML4 to the selector list; To remove the the whole lower left sidebar (which holds the Popular Posts and Labels widgets), add
#sidebar2 to the list.
III. Styling pages individually
(added Oct. 2010)
Using the static_page conditional tag as explained above will apply the styling on
all static pages. Now what if you want to style only one page. Let’s say for instance you want to change the background color of your About Me page to pale green, while leaving all other pages as they are. Can you do that?
Yes you can, and it’s easier than you might think.
- Go to Postings > Edit Pages and select the About Me page.
- Switch to HTML mode.
- Insert you CSS code on top of the page content, like so:
2 | .content-inner {background-color: palegreen;} |
5 | YOUR STATIC PAGE CONTENT HERE |
- Yes, you don’t need any conditional tag. This code only resides inside that one page, therefore it won’t affect other pages.
Enjoy!
No comments:
Post a Comment