Google

YUUUUUKKK BELAJAR BARENG

MEDIA PEMBELAJARAN BERSAMA


yukkkkkkk SINAU!!!!

Wednesday, April 9, 2008

BLOG 3 KOLOM - MINIMA TEMPLATE

BOSAN dengan template yang disediakan....
cuma 2 kolom sih....!!!
gimana caranya biar bisa 3 kolom yaaah...?

ikuti instruksi berikut ini:

SEBELUM MEMULAI, HARAP MEM BACK UP TEMPLATE MASING - MASING YAAA...

CARANYA KLIK Template -> Edit HTML. Click the “Download Full Template” link untuk menge-save kopy dari template kalian.

lalu
scroll sampe pada bagian berikut:

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

#main-wrapper {
width: 410px;
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 */
}

#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 */
}

template terbagi dalam 3 wrappers, yaitu:-

#outer-wrapper – yaitu keseluruhan blog
#main-wrapper – yaitu main Blog Posts
#sidebar-wrapper – yaitu kolom yang ada dikanan.

Untuk menambahakan Sidebar baru, copy code bagain diatas yang diberi warna merah, lalu paste dibawahnya, dan nama #sidebar-wrapper diganti dengan “#newsidebar-wrapper”.

Selanjutnya, kita sesuaikan ukuran lebar dari keseluruhan wrappers. Sebagai contoh, kita gunakan yang umum, yaitu:
750px for outer-wrapper,
400px for main-wrapper, and
150px for sidebar-wrapper.
Tentu saja kita bisa menggunakan ukuran kita sendiri, selama total dari lebar kedua kolom dan main wrappers tidak melebihi ukuran dari outer wrapper.

Juga, perbaiki margin kiri dari main wrapper, tetapi, kolom baru/newsidebar kita atur agar berada disisi kiri, sehingga original kolom tetap berada di kanan.

template kita akan terlihat seperti ini :

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 25px;
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 */
}

#sidebar-wrapper {
width: 150px;
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 */
}

#newsidebar-wrapper {
width: 150px;
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 */
}




Untuk mengubah LAY OUT EDITOR, tambahkan kode seperti berikut ini:

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {width: 750px;padding: 0px;}
body#layout #main-wrapper {width: 400px;margin-left: 20px;}
body#layout #sidebar-wrapper,body#layout #newsidebar-wrapper {width: 150px;}


AGAR BLOG POST KITA BERADA DITENGAH, kita harus menambahkan kode tertentu.

Scroll sampai kita menemukan script seperti dibawah ini

tambahkan code warna merah
diatas tulisan div id='main wrapper'.
akan terlihat seperti ini:


KODE TERSEBUT AKAN MEMBERI KITA SIDEBAR BARU, MAIN POST DITENGAH, DAN SIDEBAR YANG LAIN DI KANAN, seperti yang kalian lihat di blogku ini.

No comments: