Customize your Blogger blog with 3 column look with 2 right columns..

In this tutorial i will teach you how to create a 3 column blogger template with two narrow columns on the right and a section above the two columns here's a simple screenshot of the layout I'm planning to teach you to build

now you have an idea what we are going to build lets get started. I recommend you use a test blog for this tutorial using the minima template i always use this template because its an easy starting point once you have your template go to layout > Edit HTML scroll down and delete the width from within the CSS #header-wrapper




this enables the header to span the entire width of whatever we set the #outer-wrapper to. Do the same for the #header .description and the #footer see screenshots below





Now change the width of the CSS code for the #outer-wrapper from 660px to 960px and the width of the #main-wrapper from 410px to 530px and the float to left like I've done in the screenshots below





Next find the CSS code for the #sidebar-wrapper and change its ID to #column_wrapper and the width to 410px and the float to right see screenshot below




now we will create the CSS code for the two right columns and the top section above them so copy the following code

#sidebar-top{
clear:both;
}
#sidebar-right{
width:200px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word;
overflow:hidden;
}


paste it in your template like I've done in the screenshot below



scroll down and find the <div id='sidebar-wrapper'> and change the ID to <div id='column_wrapper'> then just below there change the ID of the sidebar section to id='sidebar-right' so it becomes a right column in the sidebar not sure ? see screenshot below



now we are going to create the top section and the left column for the sidebar so copy the following code

<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>

paste it just below the <div id='column_wrapper'> see screenshot below if you are not sure



now add this final bit of CSS code just after the #footer if you are not sure where to add it see screenshot after the code

/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}



now if you save your template and followed this tutorial right you should see this on you page element tab



i may show you some more tweaks with this template in another tutorial check my result live.i hope you enjoyed this tutorial and don't forget to share and leave your comment