Sunday, November 30, 2008

Blog Widget - Part 5

Finally, in the fifth article of this series, we arrive at the core includable of the Blog widget, the post includable. So far, we've had an overview of the Blog widget, looked at the status-message, comments and next/previous posts sections. What's remaining to be addressed is the post section.

This is what controls the appearance of the most critical content of a Blogger blog, the posts. If you open your template in Edit HTML mode and click on the ‘Expand Widget Template’ checkbox, you can see the post includable defined as follows.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='post' var='post'>
</b:includable>


</b:widegt>

The <b:widget> section with the type=’Blog’ is the entire Blog widget and inside that, what goes in between <b:includable id='post' var='post'> and </b:includable> is the post includable.

First, let’s see the main sub sections of this includable, illustrated by the figure below.


The outer most element is the post hentry section. This is divided in to three sub elements, namely, the post title, the post body and the post footer. The post footer is in turn divided in to three more sub elements.

The above abstracted diagram is of little use. To make the real connection between all these code and an actual blog post, let’s map them on to a real blog post. The following illustration is just that.


The above figure overlays few rectangular regions on top of a screenshot of an actual blog post. The post title and post body sections are visible clearly. It is the post footer and its sub sections that are not so prominent. It should be now clear to you that the author name, time stamp, labels etc. that appear at the bottom of a post are in fact contained in the post footer section.

For example, the display of post labels is handled by this piece of code.

<div class='post-footer'>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

...
</div>

The post-footer-line-3 is empty by default.

After a long series of articles (that spanned about 5 months due to time constraints) about the Blog widget, I assume that you are now confident enough to look under the hood to explore the structure of the Blog widget. Go ahead and take peak at the widget’s code.

Finally, you might ask, “What’s the use of knowing this anyway?”. Though for the most part you don’t have to meddle with the code underneath, knowledge of what controls the display of your posts can become handy when things go wrong sometimes. For example, see this thread on the Blogger Help Group where one blogger had a problem of missing the Next Previous post links from his blog and how it could be corrected by adding the missing ‘include’ statement for that section.

Thursday, November 13, 2008

Rounders 2 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 Rounders 2 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. (For other Rounders templates, check the series home given above)

The Rounders 2 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

  • Go to Layout -> Edit HTML
  • Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
  • 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)
  • Change the URL of the background property to the one shown in red below
#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders2_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}
  • Locate the #main-wrap2 CSS selector
  • Change the URL of the background property to the one shown in red below
#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders2_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}
  • Locate the #main CSS selector
  • Increase its width property to 725
  • Change the URL of the background property to the one shown in red below
#main {
background:url("$imageHost/rounders2_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}
  • Locate the following CSS selectors and change their width properties as shown in red below.
.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.
  • Locate the CSS section called #outer-wrapper
  • Increase its width property by the same amount of pixels selected in step (1)
#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.
  • Locate the following CSS selectors.
  • Replace the URLs of the images to the ones shown in red below.
#header-wrapper {
background:url("$imageHost/rounders2_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

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

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders2_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders2_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

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>

Wednesday, November 12, 2008

Rounders 4 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 Rounders 4 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. (For other Rounders templates, check the series home given above)

The Rounders 4 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

  • Go to Layout -> Edit HTML
  • Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
  • 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)
  • Change the URL of the background property to the one shown in red below
#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders4_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}
  • Locate the #main-wrap2 CSS selector
  • Change the URL of the background property to the one shown in red below
#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders4_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}
  • Locate the #main CSS selector
  • Increase its width property to 725
  • Delete the background property (shown with a strike off below)
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y left;
padding:0;
width:725px;
}
3) Increase the width of the other wrappers to accommodate the expanded main wrapper.
  • Locate the CSS section called #outer-wrapper
  • Increase its width property by the same amount of pixels selected in step (1)
#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.
  • Locate the following CSS selectors.
  • Replace the URLs of the images to the ones shown in red below.
#header-wrapper {
background:url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

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

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders4_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

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>

Sunday, November 9, 2008

Rounders 3 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 Rounders 3 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. (For other Rounders templates, check the series home given above)

The Rounders 3 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

  • Go to Layout -> Edit HTML
  • Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
  • 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)
  • Change the URL of the background property to the one shown in red below
#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders3_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}
  • Locate the #main-wrap2 CSS selector
  • Change the URL of the background property to the one shown in red below
#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders3_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}
  • Locate the #main CSS selector
  • Increase its width property to 725
  • Change the URL of the background property to the one shown in red below
#main {
background:url("$imageHost/rounders3_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}
  • Locate the following CSS selectors and change their width properties as shown in red below.
.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.
  • Locate the CSS section called #outer-wrapper
  • Increase its width property by the same amount of pixels selected in step (1)
#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.
  • Locate the following CSS selectors.
  • Replace the URLs of the images to the ones shown in red below.
#header-wrapper {
background:url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

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

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

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>

Saturday, November 1, 2008

3 Columns : Minima Lefty : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Minima Lefty template in to a three column template with two sidebars on left and right hand sides of the main post area.

The Minima Lefty gets its name because its default sidebar is on the left hand side, unlike the basic Minima template which has it on the right. In this tutorial, we will add a second sidebar to the right hand side of a default Minima Lefty template.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

  • Go to Layout -> Edit HTML
  • Locate the #sidebar-wrapper section (Do a Find using your browser)
  • Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
  • Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)
#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar
  • Locate the <div id='main-wrapper'> element.
  • Copy the code shown in red, above that section (this has to be above)

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='sidebar-two' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

3) Expand the width of the other wrappers to accommodate the new sidebar
  • Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
  • Change their width property to 880 pixels

#outer-wrapper {
width: 880px;
margin: 0 auto;
...
}

#header-wrapper {
width: 880px;
margin: 0 auto 10px;
...
}

#footer {
width: 880px;
clear: both;
margin: 0 auto;
...
}

4) Do necessary adjustments to margins, padding etc
  • Locate the #main-wrapper section
  • Insert a right margin of 12 pixels.

#main-wrapper {
width: 410px;
margin-right:12px;
float: $endSide;
...
}

5) Adjust the max width of the header description to center it in the new expanded header
  • Locate the #header .description section
  • Change the max-width property to 880 pixels.
#header .description {
...
padding:0 20px 15px;
max-width:880px;
...
}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.

6) Modify the CSS rules for the wire frame layouts editor.
  • Locate the end of the skin denoted by "]]>"
  • Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template!

Follow The Blogger Guide

I've just made it easier for you to follow The Blogger Guide, by enabling Blogger's Followers widget. Now you can easily keep track of all the clear and simple technical tutorials and tips that you always loved.

Go ahead and become a follower and show your appreciation! Thank you.