

Sebelum melanjutkan mengikuti tutorial ini, silahkan apabila ingin melihat bagaimana bentuk, posisi dan penempatan widget baru di header sebelah kanan, silahkan KLIK link demo di bawah ini.
Sebagai langkah awal untuk melakukan proses penambahan elemen baru di dalam header seperti biasanya kita harus kita harus login terlebih dahulu untuk kemudian membuka "halaman Edit HTML". Silahkan ikuti langkah-langkah berikut.
Cara Membuat Elemen Baru di dalam Header
- Login : Login ke blogger.
- Tuliskan "User Name" atau "Nama Pengguna" atau bisa juga gunakan "Email Address" jika diperlukan.
- Tuliskan "Password" atau "Sandi".
- KLIK "Login", kemudian tunggu beberapa saat hingga halaman "Dasboard" terbuka.
- Dasboard/Dasbor : Cari dan KLIK link "Design" atau "Rancangan". Tunggu kembali beberapa saat.
- Page Elements/Elemen Laman :
Cari dan KLIK link "Edit HTML. Di halaman "Edit HTML inilah semua proses penambahan elemen baru di dalam header akan kita lakukan. - Lakukan backup template terlebih dahulu. Buka panduan untuk backup template di Spesial Tutorials yang terletak di menu sebelah kiri.
- Cari kode ]]></b:skin> Gunakan Ctrl+F untuk mencari setiap kode di halaman "Edit HTML". Jika ingin mengetahui cara mencarinya, silahkan buka Special Tutorials (menu di sebelah kiri atas). Didalamnya terdapat tutorial tentang "Cara cepat mencari kode HTML serta beberapa tutorial penting dan mendasar yang lain.
Copy paste kode CSS yang ada di bawah dan letakkan di atas kode tersebut.Kode CSS:
#header{
margin:0;
padding:0;
}
#header .widget{
padding:20px;
}
#GR_headerL{
margin:0;
padding:0;
}
#GR_headerL .widget h2.title, #GR_headerL .widget h2{
font-size:12px;
font-family:Verdana;
font-weight:600;
text-transform:uppercase;
margin:6px 0;
}
#GR_headerL .widget{
margin:3px;
padding:6px 10px;
background:rgba(0,0,0,0.2);
} - Cari kode:
<div class='region-inner header-inner'>
- Di bawah kode ini terdapat kode seperti berikut:
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section> - Tambahkan kode baru hingga bentuknya menjadi seperti ini:
Kode Baru dengan penambahan elemen
<div class='region-inner header-inner'>
<div style='float:right;width:70%;'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section>
</div>
<div style='float:left;width:30%;'>
<b:section class='GR_headerLeft' id='GR_headerL' maxwidgets='1' showaddelement='yes'/>
</div>
<div style='clear:both;'/> - KLIK "SAVE Templates" atau "Simpan Template".
- Klik Elemen Laman (Page Elements) untuk melihat elemen baru yang telah ditambahkan.
- Gunakan untuk menambah gadget/widget, kemudian buka halaman blog untuk melihat hasilnya!
- Selesai!!!
Catatan :
- Merubah ukuran width widget baru dilakukan dengan merubah persentase lebar (width) yang bernilai 70% dan 30%.
- Properti CSS baru bisa ditambahkan untuk mendapatkan tampilan widget terbaik.
Comments
Post a Comment