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
3 Comments:
thanks. salam kenal
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.....!
tengkyu berat mas
berhasil ne...he3
mampir2 ya k blog sy
http://archebook.blogspot.com/
Post a Comment