Yos's Blog: Adding 4 Footer colomn to TurnOutMag Template

Adding 4 colomn footer for template TurnOutMag

Actually TurnOutMag is for wordpress template and now converted by BloggerTrick so can use too in blogspot.com .

The template comes with so many built in features including:
» Thumbnails on homepage (automatic)
» Two main columns on the Homepage (Mag style)
» Banner ad / Adsense ready
» 468 x 60 px Banner ad on the header
» Three Columns
» Search Box
» SEO Optimized
» "Read More.." (automatic summarize)
» Featured Video

But in this template not adding 4 colomn footer for this template.Only there is 2 sidebar at right and left post.sO Y.E try to modif this one.

Default if we want to add colomn footer ,we search this one..

But in this template” NO”script just like it.

Following This step carefully :

1. Login to your blogger.com

2. Go to “ Edit HTML “

3. Go and click “ Expand Widget Template ”

4. Before editting this template, you must backup your old template.

5. After that ,Go to CSS part ,and add this script

/* bottom
==========
*/

#bottom {
width: 975px;
position: relative;
clear:both;
margin: 0 auto;
color: #000000;
float: left;
background:#FFFFFF;
padding:0;
}

#bottom_1 {
width: 300px;
float: left;
padding:0;
margin:0px 0px 0px 5px;
}

#bottom_2 {
width: 150px;
float: left;
padding:0;
margin:0px 0px 0px 5px
}

#bottom_3 {
width: 210px;
float: right;
padding:0;
margin:0px 0px 0px 5px
}

#bottom_4 {
width: 300px;
float: right;
padding:0;
margin:0px 0px 0px 5px
}

just info Y.E put in that script before this script :

/** BEGIN footer **/
#footer {
    clear: both;
    background-color: #456069;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 0.9em;
}
    #footer a {
        color: #ffffff;
    }
    #footer p {
        padding: 15px 0;
        text-align: left;
        width: 975px;
        margin: auto auto;
    }
/** END footer **/

6. Find this script :

<div id='footer'>
<p>Design by <a href='http://www.wpthemedesigner.com/' target='_blank'>ChiQ Montes</a>. Converted to Blogger by <a href='http://bloggertricks.com' target='_blank'>Blogger Tricks</a></p>
</div>
<!-- END footer –>

7. Put this script before  <div id='footer'>

<div id='bottom'>

<b:section class='sidebar' id='bottom_1'/>

<b:section class='sidebar' id='bottom_2'/>

<b:section class='sidebar' id='bottom_3'/>

<b:section class='sidebar' id='bottom_4'/>

</div>

8. Than preview and see to page elemen,if success you can SAVE

9. And if you still want to add colomn footer again before, just add below this script .

before :

<div id='footer'>
<p>Design by <a href='http://www.wpthemedesigner.com/' target='_blank'>ChiQ Montes</a>. Converted to Blogger by <a href='http://bloggertricks.com' target='_blank'>Blogger Tricks</a></p>
</div>

After :

<div id='footer'>

<b:section class='sidebar' id='footer' preferred='yes'>
<p>Design by <a href='http://www.wpthemedesigner.com/' target='_blank'>ChiQ Montes</a>. Converted to Blogger by <a href='http://bloggertricks.com' target='_blank'>Blogger Tricks</a></p>
</div>

10. Done …Good luck…please leave your comment please..i need