Menambah elemen dibawah header memang sangat diperlukan untuk membuat
ruang baru seperti untuk meletakkan banner iklan,fans page,daftar isi
dan macam lainnya yang kita sesuaikan dengan keperluan kita
membuatnya.Elemen dibawah header menjadi sebuah tempat untuk menambah
atau add gadget yang kita inginkan sesuka hati kita.
Biasanya ada bermacam-macam cara membuat elemen dibawah header.Tapi kali
ini saya mau jelaskan dengan dua versi yakni versi pertama dan
kedua.Untuk mempersingkatnya langsung saja saya berikan tutorialnya agar
lebih mudah dipahami.
1.Versi Pertama ( Untuk menambah satu elemen)
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
- Kemudian cari kode yang mirip atau hampir sama dengan kode dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
- |Setelah itu copy dan paste kode berikut ini tepat kode diatas tadi
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
- |Silahkan di Pratinjau dahulu untuk mengurangi Error,jika sudah pas maka Simpan template.
- Elemen baru akan muncuk dibawah header blog kamu.
2.Versi Kedua (Untuk menambahkan 2 atau 3 elemen dibawah header)
- Pada blogger anda cari "Template" dan Klik EDIT HTML
- Terlebih dahulu centang "Expand template Widget"
- Cari kode ]]></b:skin>
- Jika sudah dapat letakkan kode berikut diatasnya
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
- Cari kode <div id='main-wrapper'> jika tidak ada cari kode ini
<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>
- Setelah mendapatkan kode tersebut, letakkan kode berikut ini diatasnya (Untuk 2 kolom dibawah header)
<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
- Dan jika ingin meletakkan 3 kolom silahkan letakkan kode ini.
<div id='box-main-container'></div>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
- Silahkan simpan templatenya.Maka lihat hasilnya di blogger anda maka akan ada penambahan elemen dibawah header.
- Jika hasilnya tidak sesuai dengan yang diharapkan maka cari kode <div id='content-wrapper'> dan letakkan kode diatas dibawah kode tersebut.
Sumber : Disini
0 komentar:
Post a Comment