Membuat Kolom Disamping Header

Membuat Kolom Disamping Header; Ini sudah ketiga kalinya saya posting dengan tema customize template. kali ini kita akan belajar satu lagi tentang menambahkan kolom. dipostingan sebelumnya saya sudah membahas tata cara membuat 2 kolom dibawah postingan dan 3 kolom di footer untuk tutorial kali ini saya akan membahas tentang membuat satu kolom disamping header. fungsinya sangat banyak sekali karena dengan adanya kolom baru disamping header kita bisa memasang iklan yang akan menghasilkan pendapatan untuk kita. nah yang belum tau apa itu kolom disamping header bisa lihat gambar berikut ini :



Kalo teman-teman tertarik membuat kolom disamping header bisa praktekan tutorialnya dibawah ini, jangan sampai ada yang terlewat oke.

1. Masuk ke Akun Blog anda
2. Klik Rancangan => Edit HTML
3. Cari kode yang  mirip dengan kode dibawah ini :

#header-wrapper {width:900px;margin:0 auto 0px;background:$bgheadercolor
no-repeat top center;height:190px;}

#header-inner {width:900px;background-position: center;margin-$startSide: 

auto;margin-$endSide: auto;}

#header {margin: 0px;text-align: left;color:$pagetitlecolor;}


Kalo sudah ketemu ganti kode diatas dengan kode dibawah ini :

#header-wrapper {width:980px; /*sesuaikan dengan lebar blog anda*/ margin:0 auto 10px;}

#headerkiri {width:200px; /*sesuaikan dengan lebar judul blog anda*/ background-position: left; margin-left: auto;margin-right: auto;float:left;}

#header {margin: 5px;text-align: left;color:$pagetitlecolor;}

#header h1 {margin:5px 5px 0;padding:15px 20px .25em;line-height:1.2em;text-transform:uppercase;letter-spacing:.2em;font: $pagetitlefont;}

#header a {color:$pagetitlecolor;text-decoration:none;}

#header a:hover {color:$pagetitlecolor;}

#header .description {margin:0 5px 5px;padding:0 20px 15px;max-width:150px; texttransform:uppercase;letter-spacing:.2em;line-height: 1.4em;font: $descriptionfont;color:$descriptioncolor;
}

#header img {margin-$startSide: auto;margin-$endSide: auto;}

#headerkanan{
width:750px; /*sesuaikan dengan lebar kolom yang anda inginkan*/ float:right;padding-top:26px;}


5. Cari kode yang mirip dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test blog (Header)' type='Header'/>
</b:section>
</div>

Kemudian ganti kode diatas dengan kode dibawah ini :

<div id='header-wrapper'>
<div id='headerkiri'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test blog (Header)' type='Header'/>
</b:section>
</div>
<div id='headerkanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


6. Simpan Template

Gimana, mudah bukan? klo memang sudah menerapkan tutorial diatas namun belum ada juga kolom disamping headernya bisa komen dibawah ini. kritik dan saran juga diterima dengan baik dibloggerpas ini. mungkin cukup sekian tutorial membuat kolom disamping header, kurang lebihnya saya mohon maaf sekian dan terima kasih.

7 komentar:

ADMIN- Pendi said...

Datang juga ke pendi31.blogspot.com

wahyu di said...

ngak ketemu gan codenya. bisa bantu saya nggak

ID Desainer said...

makasih :).. sip..

lintas line said...

akhirnya kutemukan juga panduannya, terima kasih gan

bisnis online said...

langsung dicoba dah gan, kebenaran udah lama pengen pasang banner ads disamping header blog ane :D
makasih ya....

Bruno caesar said...

postingannya bagus gan kunjungi balik yooo ;) http://marshared.blogspot.com

Fikri Gustian said...

Terima kasih pelajarannya.. langsung tak praktekin..
ditunggu kunjungan baliknya di http:/kiatminibloger.blogspot.com

Post a Comment

Hallo tamu! silakan tinggalkan komentar. Klik tulisan "Subscribe by email" untuk mendapat balasan dari Bloggerpas via email :)