membuat blog 3 kolom

pada dasarnya tempelate hanya terbagi dua.
seperti anda ketahui tempelate yang di sediakan pihak
blogger/blogspot sangat terbatas.
anda bisa mengubahnya sesuai dengan keinginan anda.
untuk mengubah semua itu ga mudah loh,. musti ada niat dolo! hehe..
misalnya anda ingin merubahnya menjadi 3kolom.
OK langsung saja ke TKP.

1. buka menu LAYOUT, kemudian pilih EDIT HTML.
2. beri (centang) pada kotak Expand Widget Templates.
3. temukan kode HTML berikut.

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }/span>

4. copy kode di atas, lalu pastekan tepat di bawah kode tersebut.jadi ada 2 yah??
lanjut.. kode yg berwarna merah anda ganti dengan#left-sidebar-wrapperkode ini
bertujuan untuk membuat css jadi unik.float: left; kode ini yang akan membuat
sidebar derada di sebelah kiri.
jadi kode akan terlihat seperti ini:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }/span>

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }/span>

5. kemudian temukan HTML bi bawah ini:

<div id='main-wrapper'>

6. paste-kan kode di bawah ini tepat sebelum kode di atas:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

7. coba preview blog anda, anda akan melihat kolom ke 3 berada di atas main section,
waduh! anjrit! jadi berantakan!
tenang saja,itu di karenakan belum merubah nilai “Outer Wrapper”.
jadi hanya bisa untuk 2 kolom.
untuk merubah nilai “Outer Wrapper”,ikuti langkah-langkah berikut:
temukan HTML berikut:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px ;
margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

anda harus merubah lebar dari wrapper,ganti angka 660px menjadi 880px.

8. Anda juga harus mengganti lebar dari header-wrapper ke angka 880px,
lihat kode di bawah:

#header-wrapper { width: 880px ; margin:0 auto 10px; border:1px solid $bordercolor; }

9. sampai sini anda bisa save template anda,coba view blog,anda akan melihat kolom
ke 3 yang masih kosong. itu di karenakan anda belum pasang wignet di sana.

10. tambahkan wignet apa saja yang anda inginkan,pada sidebar/kolom baru dengan
cara: buka menulayout - Page Elements - Add a wignet .

11. anda belum selesai sampai di sini, jika anda menambahkan widget pada sidebar di sebelah kiri anda akan melihat bahwa widget tersebut akan melebar sampai menembus
main body (tempat artikel/tulisan kita berada). Untuk mengatasinya kita cari kode berikut
pada HTML blog kita:

#main-wrapper {
width: 410px;
float: left;
margin-left: 20px
; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Kode yang saya beri tanda warna merah adalah yang harus anda rubah nilainya
seperti di atas.

12. selesai! sekarang anda memiliki 3 sidebar/kolom.

Posted in: Trick