Home » Blogging » Make 3 OR 4 column widget in the footer section

Make 3 OR 4 column widget in the footer section

Make 3 OR 4 column widget in the footer section - Selamat datang di blog Sejarah Aceh, Info kali ini adalah tentang Make 3 OR 4 column widget in the footer section !! Semoga tulisan singkat dengan kategori Blogging !! ini bermanfaat bagi anda yang membutuhkan. Dan untuk anda yang baru berkunjung kenal dengan blog sederhana ini, Jangan lupa ikut menyebarluaskan postingan bertema Make 3 OR 4 column widget in the footer section ini ke social media anda, Semoga rezeki berlimpah ikut di permudahkan sang khalik yang maha kuasa, Selengkapnya lansung lihat infonya dibawah -->




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.


Demikianlah Artikel Make 3 OR 4 column widget in the footer section, Semoga dengan adanya artikel singkat seperti Informasi postingan Make 3 OR 4 column widget in the footer section ini, Anda benar benar sudah menemukan artikel yang sedang anda butuhkan Sekarang. Jangan lupa untuk menyebarluaskan informasi Make 3 OR 4 column widget in the footer section ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.