Android & Blog Stuff

In this tutorial I will show you how to create 2 extra columns beneath your Blogger to make a Magazine styled layout.

Add new widget sections below your posts:

1. Log in to your Blogger account and go to Layout > Edit HTML (do not check the "Expand Widget Template).

2. Find this code:

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

3. Once you've found the code above, you will need to copy and paste the following code just after the closing </b:section> and before the closing </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

At this point, you can now preview your template. But it is not properly align yet.


Adding style to your new widget sections:

Now we need to add CSS code to properly align the widget. For this, just follow the steps below.

1. Find this code </b:skin>, Just before this tag, you should paste the following section of code:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}

You can add border to your widget if you like by putting this code, border: 1px solid #000000; just before the } tags. Change #000000 and 1 to whatever color or thickness of border you want. Be creative!

2. Preview or save your template. If you go to Layout > Page Elements you will see your newly added widget beneath the Blog Posts elements.

Feel free to ask me a questions if you have any problems regarding this tutorial.