Monday, July 25, 2011

Menambah 3 kolom pada footer

Biar blog kita terlihat rapi dan sedap dipandang perlu tempat ekstra apabila blog kita hanya memiliki 2 kolom saja. Oke langsung aja nieh..
1.      Pertama-tama yang harus sobat lakukan adalah langsung menuju edit html.

2.      Jangan lupa mendownload lengkap template dahulu jaga-jaga kalau ada masalah yang tidak diinginkan.

3.      Lalu centang expand template widget agar semua perubahan tidak ada yang tertinggal.

4.      Cari code

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

Gunakak Ctrl + F agar lebih mudah 

5.      Setelah itu copy code berikut tepat dibawah </div>

 <div id='footer'>
<div id='footer2' 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='footer3' 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='footer4' 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;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Nanti hasilnya seperti ini:

<div id='footer-wrapper'>
bla...bla..bla..
</div>
<div id='footer'>
<div id='footer2' 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='footer3' 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='footer4' 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;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
 

Apabila sudah langsung aja di save dan liat di pengaturan elemen halaman

Selamat Mencoba

Ping your blog, website, or RSS feed for Free
Feedage Grade C rated
Preview on Feedage: nail-art-polish-2012 Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki