Make 3 OR 4 column widget in the footer section

For the friend who has a template complete with its widget Make 2 or 3 until 5 column under the header template, of course not satisfied, if not yet have a widget in the footer section, which of course is bound to take place around various - kind of widget, so that the view template around so more beautiful and complete and unique.

How comrade ...? interested in the widget this one, Calm friend .. blogwalking in my last few days, I get this knowledge from Mochal namely tutorial how to make 3 or 4 column in the footer section, which of course is very useful for me and comrade.

1. As usual, after comrade into Blogspot and then go to the page layout and edit the HTML
Do not forget to save the template information, click the "Download Full Template"

2. After that, find the code, such as under the color red, do not check the "Expand Widget Templates"

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Please note on ..!
Not all template code as above, could be in a "wrap-footer" or "footer". to more easily, in Rounders templates, you see there are two DIV section around the footer section. In this case we only change the code red only.

3. Change the color code red with the code below:

For 3 coloum

<div id='footer-column-container'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

For 4 coloum as above image

<div id='footer-column-container'>
<div id='footer12' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

4. Click save templates

5. Continue with the search code ]]></b:skin>

6. After this, paste the code this below before code ]]></b:skin>

#footer-column-container
clear:both;
}

.footer-column {
padding: 10px;
}

And then save template, and see the results to the Layout > page elements will be visible there is the addition of 3 column in the footer. Can paste around with widgets or the other in accordance with the wishes comrade bloggers.

Hopefully useful and happy blogging.

Related Posts by Categories