Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:
Berikut langkah-langkahnya:
1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:
/* Header6. Ganti semua kode diatas dengan kode berikut:
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
/* HeaderPerhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}
7. Sekarang cari kode seperti berikut:
<div id=header-wrapper>8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
<b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=Tempat Eksperimen Kecil (Header) type=Header/>
</b:section>
</div>
<div id=header-wrapper>9. Klik Simpan Template
<div id=header-one>
<b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=Tempat Eksperimen Kecil (Header) type=Header/>
</b:section>
</div>
<div id=header_two>
<b:section class=header id=header2 preferred=yes/>
</div>
</div>
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!
No comments:
Post a Comment