Wednesday, July 21, 2010

Tutorial 3 column

Assalamualaikum dan salam sejahtera kepada semua blogger...krole rasa lama dah tak buat tutorial diblog ni,so hari ini krole nak buat "tutorial membuat 3 column"...krole harap korank semua akan paham dengan pengajaran krole ni yer heeee...(x bape reti nak trngkn ngeeee)okai langkah pertama macam biasa masuk ke akaun blogger anda dan klik design dan pergi ke ruangan edit HTML dan jangan lupa klik expand windget template.setelah berjaya berbuat sedemikian ikutilah langkah2 dibawah yer.



langkah 1 :
-okai mula2 tukar saiz header...codingnya seperti dibawah

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

-setelah berjaya ikut lankah kedua


langkah 2 :
-tukar saiz sidebar..codenya seperti dibawah

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word;
}

-setelah berjaya menukar saiz sidebar tadi sila letakkan coding dibawah ni,dibawah coding tadi...

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
}

-setelah berjaya,maka korank akan ada 2 sidebar..iaitu kanan dan kiri...


langkah 3 :
-kemudian cari coding dibawah ni dan ubah widthnya...

#outer-wrapper {
width: 880px; <--- change kat sini
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
-outer wrapper merupakan lebar keseluruhan blog anda iaitu left sidebar + right sidebar + main wrapper

langkah 4 :
-cari coding ini--><div id = 'main-wrapper'>
-dan apabila jumpa sila tambah coding dibawah betul2 diatas coding tadi

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


langkah 5 :
-cari coding main wrapper

#main-wrapper {
width: 410px;
float: left;
margin-left: 20px; <<- atau 10px word-wrap: break-word; }

-tujuan menambah code margin-left ini adalah untuk mengapkan antara sidebar dengan main-wrapper.
-setelah berbuat demikian..save...dan anda berjaya yeahhhhh!!!

p/s : alert pada coding yang berwarna merah...okai...pisss...

15 Komen:

n4dh!3r4 said...

kalau macam saya punya template tu agak2 bleh tukar jd 3 column tak? huhu

krole said...

n4dh!3r4=mmm tu krole kuang pasti r wak...sal yg krole sure tahu template cam krole ni mmg bule r..heee,sory yer...cba r dlu...

n4dh!3r4 said...

hehe ok2.. takpe.. kang lari setting jenoh lak nk edit blk.. tu yg maleh tu.. hoho

krole said...

n4dh!3r4=wak le cbe...sblom tu upload dlu template wak...kalo x jdk pon le upload lik..kan...:)

suka_haha said...

cayalah krole hehehe....

krole said...

hahahah..tq2x matdin...

donnyien said...

nice tutorial geng...ko urang mana?

krole said...

orang beaufort donnyien,krole ada p blod donnyien..tp xdak shoutmix r..camne r???

ASSOYFINGER67 said...

salam..shout box dah penuh at this time...huhu

tiefazatie said...

lala...penuh sdh shoutmix kamu krole..=)

Nur Hayaty said...

selalu tak leh balas kat shoutmix krole..k ni yaty nak ckp td

hehe tak ada pape la krole...yaty ok ja..cuma terpinga2 jap td..hehe

krole said...

sory smua....

Dc said...

Dc mm buat 3 coloum:) smart:)

krole said...

DC=heheheh...tq2x

lensa hitam.putih said...

krole..
3 column tu mcm mane???