Create Extra Columns in your Blogger Layout - Magazine Style!

Our guide on styles of web design continues: new round, new tutorial… this time it’s the turn of a layout in magazine style, Many readers have requested a tutorial to create a similar layout for their own Blogger powered blogs, so in this tutorial I'll explain how you can add extra columns and widget sections on your blog's home page to create a magazine style layout of your own.

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Create Extra Columns in your Blogger Layout - Magazine Style! 

Instructions To Follow:
STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately BEFORE/ABOVE it, paste this code:

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

Add new widget sections below your posts


Go to Design>Edit HTML in your blog template, and do not check the "expand widget templates" box. Then search for this section of code in your template:

     <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>

In your own template, this section may look a little different. For example, you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.



If you are having problems locating this section, use your browser's search function to locate the phrase "blog posts" or "Blog1", and be aware of the surrounding b:section and div tags.



Once you have found this section in your template, you will need to copy and paste the following code just after the closing </b:section> tag 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='Text31' locked='false' title='Test-1 Title' type='Text'/>


</b:section>



<b:section class='sidebar' id='magazine-right' showaddelement='yes' >


<b:widget id='Text32' locked='false' title='Test-2 Title' type='Text'/>


</b:section>



<div style="clear: both;"></div>


</b:if>

Now Click Save Template


By adding this code, we have inserted two extra widget areas which contain a "dummy" text widget so you can preview their appearance. These sections are also contained in </b:if> tags, which determine they are only seen on your blog's home page.


At this stage, you can preview your template and will see these dummy widgets appear below your posts section. However, as we have not yet styled these sections, they will appear beneath each other rather than side by side.


















How To Install Two Columns Widget Under Posts 

Instructions To Follow:
STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

.underpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.underleft{
float:left;
width:265px;
margin-right:15px;
}

.underright {
float:right;
width:265px;
}

Now find this code:

<data:post.body/>

Copy and paste the code below, exactly under the code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='underpost'>

<div class='underleft'>

Left column ads code here

</div>

<div class='underright'>

Right column ads code here

</div>

</div>

</b:if>

Now Click Save Template




The steps above are just the example for you in order to master the basic principal, because with it, you can do any variations easily. As an addition, if you want more dynamic column width, you can use the percentage (%), not use the pixel (px).
Happy trying!















How to Add Three Columns to Blogger Footer Section? 

Instructions To Follow:
STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

/*
Code is developed by:
http://hubpages.com/_rt3/profile/blog
Blogspot Tutorial Index:
http://hubpages.com/_rt3/hub/blog-index
Code Description:
Codes for adding columns (3 columns) in the blogger footer section
*/

#footer-columns{
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

.column1{
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}

.column2{
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}

.column3{
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}

.addwidget {
padding: 0 0 0 0;
}

#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}

body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}

body#layout .column1 {
width: 32%;
float: left;
}

body#layout .column2 {
width: 32%;
float: left;
}

body#layout .column3 {
width: 32%;
float: right;
}

ADD CONTAINERS TO HOLD ALL THE FOOTER COLUMNS

After adding CSS code, it's time to add the containers for the footer. To add container, first search the following code:

<b:section class='footer' id='footer'/>

Select the above line of code from your blog template and delete the entire line from the template code and paste the following lines of code there:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

SAVE THE MODIFIED TEMPLATE'S WORK

After successfully finishing the above tasks, save the modified code by clicking Save Template button to save the whole modified code. Now, your blog has three columns in the footer section.













Add a Customized Three Column Footer Widget In Blogger 

Instructions To Follow:
STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

/* -----   LOWER SECTION   ----- */

#lower {

       margin:auto;

       padding: 0px 0px 10px 0px;

       width: 100%;

       background:#333434; }

#lower-wrapper {

       margin:auto;

       padding: 20px 0px 20px 0px;

       width: 960px;

}

#lowerbar-wrapper {

     border:1px solid #DEDEDE;

       background:#fff;        float: left;

       margin: 0px 5px auto;

       padding-bottom: 20px;        width: 32%;        text-align: justify;

       font-size:100%;

       line-height: 1.6em;

       word-wrap: break-word;

       overflow: hidden;

}

       .lowerbar {margin: 0; padding: 0;}

       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {

      margin: 0px 0px 10px 0px;

       padding: 3px 0px 3px 0px;

       text-align: left;

       color:#0084ce;         text-transform:uppercase;

      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }

.lowerbar ul {

      margin: 0px 0px 0px 0px;

      padding: 0px 0px 0px 0px;

      list-style-type: none;

}

.lowerbar li {

      margin: 0px 0px 2px 0px;

      padding: 0px 0px 1px 0px;

      border-bottom: 1px dotted #ccc;

}

Step #3
Now find the bellow code

</body>

just before it, paste this code:

<div id='lower'>

<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='lowerbar1' preferred='yes'>

</b:section>

</div>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='lowerbar2' preferred='yes'>

</b:section>

</div>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='lowerbar3' preferred='yes'>

</b:section>

</div>

<div style='clear: both;'/>

</div> </div>

Now Click Save Template

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our Hex Color Code Chart & Generator   or  Html Color Codes Generator

background:#333434;   Changing the six digit colour code will change the background colour of this widget.

width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.

background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added. 





color:#0084ce; This is the Colour of Title Headings 

font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.  
 
border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading

border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links. 
 

That’s All!