Featured

Home » , , » Cara Membuat Kolom Widget di Sebelah Kanan Header Baru

Cara Membuat Kolom Widget di Sebelah Kanan Header Baru

Cara Membuat Kolom Widget di Sebelah Kanan Header

Tutorial kali ini saya tujukan khusus bagi yang menggunakan template Thesis SEO Blogger dari Blog Juragan, template yang sedang saya gunakan saat ini. Seperti kita ketahui bahwa header template tersebut hanya memuat satu kolom. Namun, di dalam HTML template tersebut sudah ada potongan kode CSS untuk header bagian kanan yaitu #r_head.
Kita tinggal menyempurnakan kode-kodenya saja agar header tersebut dapat terbagi menjadi dua kolom. Nantinya, kolom widget yang ada di kanan header ini akan mempunyai lebar sebesar 468 piksel. Cocok bila ingin menaruh banner ukuran 468 x 60.
Baiklah, langsung saja ke topik bahasan kita yaitu cara membagi dua kolom header pada template Thesis SEO Blogger. Berikut ini langkah-langkahnya. Semoga berhasil.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan >> Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini berguna jika nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.
4. Cari deretan kode seperti di bawah ini.
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
5. Kemudian ganti kode-kode tersebut dengan kode di bawah ini.
#header-inner {
width:432px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:left;
padding-top:10px;
}
6. Setelah itu carilah kode seperti di bawah ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>
7. Kemudian tambah kode berwarna merah sehingga hasilnya menjadi seperti di bawah ini.

<div id='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
8. Klik tombol "SIMPAN TEMPLATE".
9. Lihat hasilnya pada tab Elemen Laman.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

6 komentar:

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger