Senin, 10 Agustus 2009

Cara membuat kolom tambah gadget bawah header

Ada yang menyebutnya dengan elemen 'gadget' bawah header, dan ada juga yang menyebutnya dengan kolom gadget bawah header,  ada juga yang menyebutnya dengan kolom tambah gadget bawah header..yah apa sajalah..yang penting tetap satu jua..wkwk
fungsinya sama seperti sidebar, tetapi yang ini terletak tepat dibawah header. Anda dapat menambahkan gadget-gadget yang ditawarkan blogger untuk memperindah tampilan blog anda. siapa sih yang ngga' mau blog nya tampil cantik..he2x
nih caranya:
1. log in ke blog anda
2. klik tab layout (tata letak), lalu pilih edit html. (centang pada expand template widget)
3. carilah kode ]]</b:skin>, gunakanlah ctrl+f untuk mempermudah pencarian. lalu copy kode berikut dan letakkan di atas kode ]]</b:skin> tadi.
#under_header1{
}


4. kemudian, carilah kode berikut ini:

<div id='content-wrapper'>
lalu copy kode di bawah ini dan letakkan di atas kode yang baru saja anda cari:

<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
5. Lalu simpan template anda dan lihatlah hasilnya di elemen halaman.
hasilnya akan menjadi seperti ini:

=====Jika anda ingin membuat yang seperti ini:=====


Maka anda harus menambahkan kode di bawah ini dan diletakkan di bawah kode yang sudah anda tambahkan pada langkah 3:
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:left;
width:33.33%;
}
#under_header4{
float:right;
width:33.33%;
}
dan tambahkan juga kode di bawah ini dan letakkan di bawah kode yang sudah anda tambahkan pada langkah 4:
<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>
<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>
<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>


Lalu simpan templatenya....
====Jika anda ingin yang seperti ini:====

Anda hanya harus merubah dan menambahkan sedikit kode yang telah anda buat.
untuk langkah / tahap 3, anda rubah menjadi seperti ini:
#under_header1{
}
#under_header2{
float:left;
width:50%;

}
#under_header3{
float:left;
width:50%;
}
#under_header4{
float:left;
width:33.33%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:right;
width:33.33%;
}
dan rubahlah kode pada langkah 4 menjadi seperti ini:
<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>
<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>
<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
<div id="under_header5">
<b:section class='header' id='underheader5' preferred='yes'/>
</div>
<div id="under_header6">
<b:section class='header' id='underheader6' preferred='yes'/>
</div>
mudah kan??
====nih penjelasannya:====

--->lihatlah kode-kode yang berwarna hitam..
  • float : menunjukan letak kolom, "left" untuk kiri dan "right" untuk kanan.
tidak ada center. untuk penggunannya, right hanya digunakan untuk kolom yang paling kanan. contoh:
jika anda ingin membuat 10 kolom dalam satu baris, maka anda harus memberikan nilai "left" pada float kolom 1 sampai dengan yang ke 9. dan float yang ke 10 (terakhir) bernilai "right".
  • width : menunjukan lebar kolom, satuannya %(persen), jadi maksimumnya 100%..
jumlah lebar kolom dalam satu baris harus kurang atau sama dengan 100%. jika lebih maka lebar kolom yang melebihi akan diletakkan di baris berikutnya.
contoh:
jika anda ingin membuat 4 kolom dalam 1 baris, maka anda dapat memberikan lebar masing-masing kolom sebesar 25%, atau jika anda ingin membuat 4 kolom dalam 1 baris dengan lebar yang tidak sama, maka anda dapat memberikan lebarnya (misalnya), lebar kolom 1=40%, kolom 2=30%, kolom 3=20%, kolom 4=10%. yang penting jumlahnya tidak melebihi 100%.
---->untuk yang berwarna merah..
yang setelah tanda pagar (#) harus sama dengan yang ada di <div id=...
namun untuk yang berwarna biru, jangan anda samakan (beri underscore) dengan yang berwarna merah, karena dapat merusak hasil..hehe
nah, kalau sudah mengerti, anda dapat berkreasi sendiri sekarang..
good luck y..
thanks

Tidak ada komentar:

Posting Komentar