Friday, April 13, 2007

Cara membuat format 3 kolom

Buat yang seneng ngutak ngatik blog, saya akan mencoba menguraikan bagaimana cara membuat 3 kolom dari format template standar..ini merupakan ringkasan dan translate dari blognya Hans yang saya temukan gak sengaja dari googling..marilah kita mengenal struktur blogger kita.

Blogger template standart mempunyai sebuah Header section , Sidebar-section, main-section dan Footer-section didalam section inilah blogger meletakkan widgets, yng merupakan page elements yang bisa dipilih dari tab template. Jika kita membuat blog baru yang masih fresh maka tampilan tab page element akan seperti ini :



Layout ini mempunyai 4 sections: Header, Main (with the Blog Posts), Sidebar and Footer.
The HTML-template terlihat spt ini (no baris untuk mempermudah saja):

010: <body>

020: <div id='outer-wrapper'>l<div id='wrap2'>

030: <!-- skip links for text browsers -->

040: <span id='skiplinks' style='display:none;'>

050: <a href='#main'>skip to main </a>

060: <a href='#sidebar'>skip to sidebar</a>

070: </span>

080: <div id='header-wrapper'>

090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)'type='Header'/>

110: </b:section>

120: </div>

130: <div id='content-wrapper'>

140: <div id='main-wrapper'>

150: <b:section class='main' id='main' showaddelement='no'>

160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

170: </b:section>

180: </div>

190: <div id='sidebar-wrapper'>

200: <b:section class='sidebar' id='sidebar' preferred='yes'>

210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

230: </b:section>

240: </div>

250: <!-- spacer for skins that want sidebar and main to be the same height-->

260: <div class='clear'> </div>

270: </div> <!-- end content-wrapper -->

280: <div id='footer-wrapper'>

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

300: </div>

310: </div></div> <!-- end outer-wrapper -->

320: </body>

baris 010 dan 320 adalah body tags. Semua kode2 harus diletakkan diantara 2 tags ini

baris 020 dan 310 adalah div tags untuk 2 wrapper, wrapeer dikenal juga " outer wrapper" dan wrapper dikenal "wrap2". dalam CSS kita dapat mendefinisikan jenis huruf , warna, dan styling untuk wrappers.

baris 080 sampai 120 adalah header. seperti yang kita lihat disana ada div-wrapper (080 dan 120),section-tags (090 dan 110) dan widgets yang didlmnya ada header (100)
baris 130-270 adalah content (blog post dan side bar ) .disana ada div-wrapper yang disebut content wrapper (130 dan 270) dan didlm wrapper ini ada 2 atau lebih wrapper : main wrapper (140-180) dan side bar wrapper (190-240)

didalam main-wrapper kita dapat menemukan the main-section (150 dan 170) dengan Blog-widget (160). widget ini mengandung post post kita.

didalam sidebar-wrapper kita menemukan the sidebar-section (200 dan 230) dengan Archive-widget (210) dan Profile-widget (220).

dan terakhir ada Footer (280-300).

setelah mengerti struktur mari skr lihat format template ini... di "stylesheet kiat akan menemukan kode seperti dibawah ini :

#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

The outer-wrapper mempunyai lebar 660 pixels. Padding diset 10 pixels, sehingga semua yang ada didalam outer wrapper mempunyai jarak 10 pixel dari border sehingga menyisakan 660 - 20 = 640 pixels untuk main-wrapper and sidebar-wrapper.
The main-wrapper mempunyai lebar 410 pixels, dan floats to the left.
The sidebar-wrapper had a width of 220 pixels, and floats to the right. Together, main-wrapper and sidebar-wrapper have a width of 410 + 220 = 630 pixels. ditengah ada space 640 - 630 = 10 pixels.
jadi kita harus membuat space jika ingin menambah side bar

Menambah side bar ke 2
pertama kita akan menambah sidebar ke struktur template kemudian kita akan menambahkan itu ke CSS dan membuatnya pas dengan halaman yg kita buat.


Step 1: Backup template ( ini penting klao kegagalan terjadi anda tdk kehilangan template lama)

Step 2: buat right-sidebar
ganti baris 190 and 200 menjadi :
190: <div id='right-sidebar-wrapper'>
200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>

nb: angka 190 dan 200 jangan dikopi


pada CSS style-sheet, ganti "#sidebar-wrapper" menjadi "#right-sidebar-wrapper".
lalu save changes

Step 3: menambah sidebar kiri dengan menambah baris kode pada :


131: <div id='left-sidebar-wrapper'>

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

133: </div>

angka 131,132,133 jangan ikut dikopi

sekarang simpan template dan lihat ke halaman page element



dapat kita lihat ada penambahan section baru , dibawah header dan diatas the posts, tp itu blm berada di sisi samping , oleh krn itu kita harus menambahkan kode CSS


Step 4: tambah CSS untuk left sidebar.
pada CSS-style sheet kamu , tambahkan kode ini:
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Maka Tampilan akan seperti ini:



Step 5. ganti lebar outer-wrapper and header-wrapper .
pada CSS-stylesheet carilah #header-wrapper and #outer-wrapper definitions, dan ganti lebar 660 to 860.

maka tampilan akhir akan menjadi seperti ini :


saat mencoba ini hasilnya memang bisa untuk 3 kolom, tp yang sayamasih bingung juga knp tampilan page elementnya ngaco...tp anehnya kalo di view..yah hasilnya bagus....jadi gak masalah deh untuk sementara...Kalo bingung lebih baik liat kesini langsung siapa tau bisa menemukan jawabannya

4 Comments:

jodis said...

thanks. salam kenal

duniamaya said...

uhh nemunih buat nambah di sebelah kanan, tapi bisa ngga kalo sampe ke atas header (bukan dibawah header) jadi headernya ke potong ma sidebar yang baru....tolong tutornya ya.....!

Abid's Adsense Treasure Website Package said...

===>> http://www.abid.in

Here's your chance to make $40,000 per month with
Adsense by being lazy.....


Wanna Find out How I, By Being a Lazy Ass Make $40,000/Month
(Yep, that's 40,000 USD) Every Month Like Clockwise From My Web.site.


===>> http://www.abid.in

The Website Is.

* Highly Optimized
* Content Rich
* Profit Pulling
* Fully Automated

Here's What You Get:

A Huge Money Making Website
Integrated with Adsense ads,
dynamic feeds and over a thousand content pages.


My Free Traffic Report
Methods I use to get a lot of traffic, almost instantly.

Free Email Tips
You will get some EXTRA tips on promoting your new website by email.

Setup and Hosting Help
Even though you get full easy to follow setup instructions.
If you still have trouble you can contact us
we will set up and host your website for you.


===>> http://www.abid.in

As an special offer, I am offering my complete Adsense Treasure System A fully automated website which makes you money while you sleep.

Finally a tool for you to make some serious money.

Get Your Copy Now... Click here

===>> http://www.abid.in

Ready Made Website






Shah Rukh Khan

Bollywood

ShahRukhKhan



India's Online Shopping Mall

Online Shopping Mall

Buy Online


Link Directory
The Most Responsive FREE Safelist
Make Money Online
Master Resell Rights eBooks
Bollywood Sargam

archebOOk said...

tengkyu berat mas

berhasil ne...he3

mampir2 ya k blog sy
http://archebook.blogspot.com/