Wednesday, January 28, 2009

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



9 comments:

Anonymous,  January 28, 2009 at 4:56 PM  

this tutorial is very usefull...
thanks sobat...

Anonymous,  January 29, 2009 at 9:57 AM  

wah mantap nih pak...nic info

Anonymous,  January 30, 2009 at 11:18 AM  

nice info mas

Anonymous,  January 30, 2009 at 2:36 PM  

Top bang baka, saya bungkus nih tutorial buat dicoba, kebetulan mo nyoba blogspot nih ...

Salam

Angel Alone January 30, 2009 at 9:04 PM  

Nice widget
langsung dicoba Akang
thanks banget

Baka Kelana January 30, 2009 at 10:43 PM  

@ suryaden : Sama 2 Bang Surya
@ casual cutie : Jangan panggil Pak Dong..Thanks ya
@ david : Yup, Thanks
@ info resep :Thanks
@ abangMaulana Armani : Silakan saudara Maulana

Anonymous,  January 31, 2009 at 2:40 AM  

wah, sangat bermanfaat kode2 tag ini utk ngoprek theme, mas kelana, makasih share-nya. kebetulan lagi seneng2nya ngoprek blog.

Subagya January 31, 2009 at 9:48 PM  

yups bang baka is thinking out the box good good....

Post a Comment

“sekadar meluah rasa, melepas hasrat, melerai ragu. Andai sepi coretan ini, kesepianlah yang sedang bersarang di jiwa.Andai riang coretan ini,kerianganlah yan sedang bertakhta dihati. Mengikut rentak hidupku,musafir dibumi Ilahi. Semoga rahmat-Nya sentiasa memayungi kita bersama”.

Bila artikel ini bermamfaat , tinggalkan komentar kawan

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008 Aceh Blogging

Back to TOP