Wednesday, November 10, 2010

Blogger trick1: Using Template Designer and increasing post Width

Using Template Designer was really cool. zero effort cool. Bu post width used to be so small that it sucked.
Tried to find solution for this problem, found several tricks to increase post width in template, none worked for new templates.
Finally i thought i should use my own head for a bit. This was simple. Then i thought why not restrict height of post and add
scroll bar so viewing multiple post on one page will be easier.
So, following things are covered in this post:
  1. Using Template designer to select template
  2. Adjusting width of layout through template designer.
  3. Adjust post width through HTML in blogger Editor.
  4. Adding scroll bar to post body by restricting height of post.
  • Goto Dashboard –> Design –> Template Designer
  • Select Template you like. Select Background.
  • In Layout tab->Body Layout –>  select layout you like, i prefer 2 column layout like this:
                   image
  • Now, Layout tab-> Adjust Width –> Select max width as 1000px, and adjust left sidebar accordingly.
image
  • Click on “Apply to Blog” button. View blog.
  • You have now created theme for blog. It’s time to increase post width or adjust max width of post.
  • Click on “Back to Blogger” link –> Edit HTML –>
  • In text Area search following text
  • <b:template-skin>
    <b:variable default='930px' name='content.width' type='length' value='1000px'/>

  • replace value=’1000px to size you want say value=’1200px’
  • Now add scroll bars to your post body:
  • Search following text in text Area
  • .post-body {
    position: relative;
    }



  • replace this block of css with following
  • .post-body {
    position: relative;
    height : 700px;
    overflow:auto;
    }



  • 700px is size i preferred you can give any height value you wish. Scroll bar will appear if your post height increases length of 700px.

0 comments:

Post a Comment