* Elemen Header
* Elemen Outer
* Elemen Footer
Untuk elemen Outer di bagi kembali menjadi :
- Elemen main, elemen main ini adalah elemen tempat kita menyimpan
posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di
tampilkan pada elemen ini
- Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk
menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk
mempercantik blog.
Akibat ketidak puasan dari sidebar yang hanya satu buah, maka jika kita
menginginkan adanya sidebar tambahan maka kita tentu saja harus menambahnya
sendiri, agar sedikit jelas maka akan saya perlihatkan kode template asli dari
template minima (template baru/XML)
Dari kode diatas, yang perlu di perhatikan adalah kode di sekitar
Outer-Wrapper :
/* Outer-Wrapper
------------------------------------------ */
#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 */
}
Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan
main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru
atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan
adalah menambah nilai lebar dari Outer-wrapper itu sendiri.
Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di
pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan
saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara
otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga
secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel +
20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga
nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh
seperti ini :
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Maka apabila di tambahkan kodenya jadi seperti ini :
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;br>
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;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita
harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template
diatas, kode id untuk sidebar adalah seperti ini :
Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang
akan kita buat, kodenya seperti ini
Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli,
kodenya kira-kira seperti ini :
Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka
sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang
sama untuk Outer-wrapper yaitu sebesar 840 px. .
Masih bingung?
Agar tidak terlalu bingung, saya ajak sobat untuk mempraktekannya langsung.
Silahkan sobat buat satu blog baru sebagai percobaan (jangan pada blog yang
utama), pilihlah template minima yang biasa. Sudah siapkah sobat? Ok, kita
langsung meluncur ke TKP dan saya asumsikan sobat sudah mempunyai satu blog baru
sebagai bahan percobaan :
* Sign in di blogger
* Klik menu Layout
* Klik menu Edit HTML
* Ingat ! jangan memberi tanda centang pada kotak
kecil di samping tulisan Expand Widget Template, sekali lagi jangan
mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode
widget yang memusingkan kepala.
Cari kode seperti di bawah ini :
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :
#header-wrapper {
width:840px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
§ Cari kode seperti di bawah ini :
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}br>
ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;text-align:left;
font: $bodyfont;
}
Cari kode seperti di bawah 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 */
}
Copy paste kode berikut persis di bawah kode yang seperti di atas :
#sidebarbaru-wrapper {
width: 180px;
float: right;
psdding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Cari kode seperti di bawah ini :
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :
#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Cari kode seperti di bawah ini :
Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :
* Klik tombol Simpan Template
* Selesai.
Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah
berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut
dengan apa saja lalu lihatlah hasil nyatanya.
Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi
lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa
yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, seperti blog ini
!
Selamat berexperimen !
maksa mode on 
Posts
