Show Your Appreciation

Hope something on this blog has been useful to you and I assume that’s why you are here. It’s indeed my pleasure to have you helped you! Given below are some methods in which you can show your appreciation.

Donate
Make a small donation to cover my basic costs. Remember, every dollar counts, so donate only what you are comfortable with. And there’s no obligation at all; donate only if you wish to do so. :-) Use the PayPal Donate button in the sidebar to donate.

Link to This Blog
You are absolutely free to use the various resources such as images, scripts etc provided with some of the tutorials. However, if you do use them, I appreciate if you can put The Blogger Guide to your Blog List and/or write a post in your blog linking to the relevant tutorial

Bookmark the Articles
Sharing and bookmarking the articles is another good way to say thanks. Submit to Digg, Stumble, add to Technorati favorites or add to whatever social bookmarking service you use.

Rate My Posts/Blog
If you found this blog via an answer given by me on a forum such as Blogger Help Group, Blogger Forum or BlogCatalog, then please rate or rank my posts/blog on those forums.

Spread the Word
Tell your friends and family; refer them to The Blogger Guide.

Thank You,
ids.

Scribe with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Scribe template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 630 by adding 200 to the default width of 430 pixels

#main {
width:630px;
float:$endSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the following CSS sections
• Change their width property to 900 pixels

#outer-wrapper {
...
width:900px;
...
}

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Replace the other background images with expanded ones as necessary.

• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Locate the following CSS selectors.
  
• Replace the URLs of the images to the ones shown in red below.

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

#header {
background:url("$imageHost/scribe_divider_w.gif") no-repeat bottom $startSide;
}

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Denim with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Denim template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main-wrapper CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 664 by adding 200 to the default width of 464 pixels.

#main-wrapper {
width: 664px;
float: $startSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS sections called #content-wrapper and #header
• Increase their width property by the same amount of pixels selected in step (1)
  

#content-wrapper {
width: 960px;
margin: 0 auto;
...
}

#header {
width: 960px;
margin: 0 auto;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.