Multiple colomn footer for TurnOutMag Template

Adding 4 colomn footer for template TurnOutMag

Actually TurnOutMag Template is for wordpress  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  i try to modif this one.

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

<div id='footer-wrapper'>

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
}

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

<!-- BEGIN footer -->

<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 <!-- BEGIN footer --> <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

your opinion or your suggest… 


 

Reblog this post [with Zemanta]

Related Posts by Categories



0 comments:

Post a Comment

Silahkan tinggalkan pesan disini