Cara membuat template multi coloum

Menambah column pada footer template blog. Bagaimana cara membuat atau membagi footer template blog menjadi 3 column. Column footer adalah ruangan column yang ada di bagian paling bawah template anda. Dengan membagi coloum footer menjadi tiga column bisa anda gunakan untuk menambah widget,iklan,atau apa saja yang anda inginkan.

Cara Pertama :
1-log in ke account blogger anda.
2-Click lay out---->Edit HTML-Jangan centang kotak kecil EXPAND WIDGET !! Sebab jika anda akan kesulitan mencari kode yang akan anda tambahkan script Footer Tiga Column,Soalnya jika di centang maka semua kode html template anda termasuk widget di blog anda akan muncul semua.
3-Cari kode ]]></b:skin> : didalam template anda.
4-Kemudian copy pastekan code di bawah ini tepat di atas kode ]]></b:skin> :

/* bottom
---------------------------- */

#bottom {
width: 925px;
position: relative;
clear:both;
margin: 0 auto;
color:#a4e11e;
float: left;
background:#000000;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ffcc66;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #a4e11e;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #a4e11e;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#a4e11e;
text-decoration: none;

}
#bottom ul li a:hover {
background: #000000;
}

#left-bottom { /* Kode Kolom kiri */
width: 300px;
float: left;
padding-left:10px;
}

#center-bottom { /* Kode Kolom Tengah */
width: 300px;
float: left;
padding-left:10px;
}

#right-bottom { /* Kode Kolom Kanan */
width: 300px;
float: left;
padding: 0 5px 0 10px;
}

5-Kemudian cari kode yang mirip dengan code dibawah ini :


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

Jika anda tidak menemukan code tersebut coba cari kode seperti di bawah ini ;

<b:section class='footer' id='lower-footer' preferred='yes'>

6-Jika sudah ketemu copy pastekan kode di bawah ini tepat diatas code <div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
tadi.

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>

Keterangan :
-Angka 925 adalah ukuran lebar keseluruhan template anda jadi anda bisa menggantinya dengan ukuran template anda contohnya template blog saya ini ukuran lebarnya 940 pixel,nah karena jumlah columnya di bagi 3 maka silahkan anda bagi sendiri untuk 3 column dengan padding 15 px tiap column,padding artinya ruangan yang berada diantara 3 column tersebut.
-Kode a4e11e adalah kode warna garis bawah judul yang anda buat pada setiap column nantinya,bisa anda ganti sesuai dengan warna yang anda inginkan. untuk code warna silahkan baca sampai habis artikel ini.
-kode 000000 adalah kode warna back ground,yang bisa anda ganti juga dengan kode warna back ground blog anda.
-Kode a4e11e adalah kode warna border pada setiap column,ganti dengan warna border yang anda inginkan.
-Angka 300 yang warna hijau adalah ukuran lebar colomn sebelah kiri, bisa anda ganti dengan ukuran yang anda inginkan.
-Angka 300 yang warna merah adalah ukuran lebar kolom tengah, bisa anda ganti juga denga ukuran yang anda inginkan.
Angka 300 yang warna putih adalah ukuran lebar column sebelah kanan, bisa juga anda ganti, yang penting anda sesuaikan ukurannya dengan ukuran lebar keseluruhan template anda,Tinggal anda bagi sendiri kemudian kurangin dengan ukuran padding pada setiap column 15 px. jadi kalo 3 column berarti mempunyai 2 column padding.
Kesimpulannya adalah setiap kode angka yang tertulis dengan warna yang berbeda dengan text artikel bisa anda edit sendiri.

Cara Kedua :
Cara kedua urutannya sama dengan cara pertama hanya di bedakan oleh code HTML nya saja dan cara kedua ini anda tida perlu melakukan editing ukuran column,sebab code HTML yang kedua ini sudah otomatis akan menyesuaikan ukuran columnnya dengan ukuran lebar FOOTER anda.jadi anda tidak bisa melakukan editing ukuran columnya FOOTER template akan terbagi 3 Column secara automatic.
1-Caranya sama dengan cara pertama yaitu Log In ke account blogger anda --->Lay out --->Edit HTML.
2-Cari kode ]]></b:skin> : didalam template anda, kemudian copy pastekan code di bawah ini tepat diatas code ]]></b:skin> ::


#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
3-Jika sudah selesai cari lagi code dibawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</div>
Jika tidak ketemu code tersebut cari kode seperti :

<b:section class='footer' id='lower-footer' preferred='yes'>

4-Hapus Code yang saya tulis dengan warna merah, dan ganti dengan code di bawah ini,Jika anda hanya menemukan code seperti ini <b:section class='footer' id='lower-footer' preferred='yes'> anda cukup copy pastekan saja code di bawah ini diatas code

<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;'/>
<p>
<hr align='center' color='#ffffff' 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>


CATATAN ; Code FFFFFF yang ditulis dengan warna merah adalah code warna Back Ground, bisa anda ganti dengan warna yang sesuai dengan Back Ground template anda.
5-Nah jika sudah selesai jangan langsung di save ! dipreviews dulu jika berhasil baru di save.
Perlu Diingat : Jika mengalami kegagalan editing HTML template, anda jangan bingung !! kembalikan saja template anda dengan Click CLEAR EDIT , Dengan catatan editing HTML belum anda SAVE !!. maka template anda akan kembali seperti semula.Makanya setelah editing HTML jangan di save dulu sebaiknya di previews dulu, jika berhasil baru di save.
Selamat mencoba.

Related Posts by Categories