Monday

menbuat 3 columns di footer


TUTORIAL FOR BLOG





Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<div id='footer-wrapper'>

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

copy dan paste kod di bawah dan GANTI kan pada kod berwarna coklat 

.................................

<div id='footer-column-container'>

<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;'/>

<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>

.........................................................

in case kalo tidak jumpa 
cuba cari kod di bawah
anda boleh menggunakan "Ctrl + F" untuk mudah cari

<div id=footer
..............

next,
kalo tiada error
cari kod di bawah pula
lebih mudah gunakan "Ctrl + F "

</b:skin>

dan paste kod di bawah SEBELUM/DI ATAS kod di atas

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

then, Save Template.

warning : pastikan anda backup template dulu


SELAMAT MENCUBA


2 comments:

  1. Thanx 4 de info! aida dah lama nak cari tutorial n.. huhu..

    ReplyDelete