Sunday, 29 May 2011

Changing the Style of Blogger Static Pages

The Blogger static page feature is a useful way of displaying important information that never changes, or data that changes less frequently.  The problem with static pages is that they don't look like a web pages, they look just like the standard post pages.

Wouldn't it be great if you could use the full width of your Blogger template to display your family tree information in, well you can thanks to this tip from Greenlava at Blogger Sentral
Check out my AncestorTree Page from the horizontal menu bar to see this tip in action.

So here is what you need to do:-

First you need to paste the style code below into your static page html code.  

Go to Postings > Edit Pages and select the page you want to apply this to.  Switch to HTML mode; then insert this code above your static page content.

<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
</style>

You will see that I have managed to get my family tree images to stretch the width of the blogger template.  This also takes a bit of tweaking.  


So next:- 

Import your image; then select the image, now change the size to Original Size and choose Left for the justification.  Now switch to HTML mode, and add width="100%" just before the end of the img code (see example below)

<a href="http://3.bp.blogspot.com/-H2UnrjL9rmQ/TeJsrT782aI/AAAAAAAACcM/Ix18B0p67z0/s1600/Tree-MB.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-H2UnrjL9rmQ/TeJsrT782aI/AAAAAAAACcM/Ix18B0p67z0/s1600/Tree-MB.png" width="100%" /></a></div>


Gaining this extra space and making your page look more like a standard web page improves the look and gives added benefits.  To see the full tip with other applications go to this post at Blogger Sentral - Apply different layout/styling to static pages

6 comments:

  1. Fantastic! How did you create your wonderful family trees?

    ReplyDelete
  2. Ros - I use Family Tree Maker which is re-known for its poor charting capability, but rather than switch to a new program and start the learning curve all over I purchased Charting Companion for FTM by Progeny.

    It has some nice charting, but it does suffer from upgrade issues similar to FTM. Whenever FTM upgrade they create a new file format which then does not work with the CCFTM, Progeny have no cheap upgrade path - very frustrating!

    ReplyDelete
  3. This is something very important because fixing your static pages can help your site a lot. Thank you very much.

    ReplyDelete
  4. great work. it works fine. thumbs up :)

    ReplyDelete