3 Column Minima Templates for blogger part 2

Now let's get started this will be the part 2 of my post on how to edit your template If you read my first post on how to add another "Sidebar" on the left of the post or probably you know it as a " 3 column template " this post is the continuation of the tutorial, but if you don't see my first tutorial yet here is the link on my first post 3 column minima template, This continuation is all about editing your " Page element ", Now saying that you already follow the instruction and already have a " left sidebar " the picture will look like this on your " Page element " .

But if you already have a 3 column template that you downloaded in different site and it doesn't look like that when you go to " Page element " that's fine you could still use this tutorial on how to add another " Add a Page Element " on your page element section, just scroll down to Adding Add a Page Element. Now back to our tutorial first let's fix the expanded view of the layout and also remove the scroll section on the bottom of the editor. Go to " Edit HTML " again, and remember to save a copy of your template on your computer, always do that if you want to edit something on your HTML so that if something goes wrong you can just upload it back. just click on the " Download Full Template ". see picture below for sample.





Fixing the expanded view of the Page element.


there are 3 basic highlighted color on this post.

"Blue color is the HTML you copy"...

"Green highlighted color is the one you paste"...

"Yellow color is the one you change or replace"...

When your done saving your template scroll down and search for this below.


/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

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

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

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


Copy the blue highlighted color and paste it after " margin-right: 0px;} " then save it. If you copy it right and paste it correctly you'll see the picture like this on your Page element.

Adding " Add a Page Element ".

Now let's add a Page element above the " Header " putting a page element above the header will help you a lot if you want to put a link to your home page or another blog link like gallery, downloads, movie etc. any link you want to put. Or adding a Google AdSense image above the header will increase the chance of clicking the AdSense. Go to Edit HTML and scroll down or press " Ctrl+F " then search for the HTML code like this.


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>



change the yellow highlighted number to 2 and change no to yes like you see above, and you'll probably see the page element that i circle above the headers. See the sample picture below.






Adding "Add a Page element" above the " Blog Post ".

Scroll down and search for this code.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>


Change the yellow highlighted color after doing that you'll see the page element just like this.







Last is Adding " Add a Page Element " after the headers.


Scroll down again and search for the code below.


<div id='content-wrapper'>


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


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

Change the yellow highlighted color to yes, But if you don't have the green highlighted color and you can't find it just copy all the green highlighted color and paste it after this " <div id='content-wrapper'> " , Now see picture below it will look like this.

Now your done adding 3 " page element ", you have now 6 Page elements.

see picture below.