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.<b:section class='header' id='underheader1' preferred='yes'/>
</div>
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:float:left;
width:33.33%;
}
#under_header3{
float:left;
width:33.33%;
}
#under_header4{
float:right;
width:33.33%;
}
<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>
<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:}
#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%;
}
<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??<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>
====nih penjelasannya:====
--->lihatlah kode-kode yang berwarna hitam..
- float : menunjukan letak kolom, "left" untuk kiri dan "right" untuk kanan.
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%..
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