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…