Cara Membuat Kolom Widget di Sebelah Kanan Header

Cara Membuat Kolom Widget di Sebelah Kanan Header -

Hallo para Blogger

Pada posting sebelumnya saya telah menjelakan tentang "Cara buat 3 kotak di bawah footer" dan "Cara Buat 3 kotak diatas Header" dan kali ini saya akan menjelaskan tentang bagaimana membuat

 Kolom Widget di Sebelah Kanan Header

langsung saja  cara, berikut:

1.Pertama masuk dulu ke akun Blogger masing-masing

2.Klik Rancangan lalu Edit HTML

3.Jangan lupa centang Expand Widget Template atau backupa dulu templatenya

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='Yulio Adi Candra (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='Yulio Adi Candra (Header)' type='Header'/>

</b:section>

</div>

<div id='r_head'>

<b:section class='header' id='header2' preferred='yes'/>

</div>

</div>

8. Setelah selesai mengedit Klik SIMPAN

maka hasilnya akan seperti gambar di bawah ini

Tweet