Cara Membuat 2 Kolom Header di Blog

Daftar Isi

Halo para pembaca setia blog ini! Selamat menikmati pagi yang indah dan semoga kecerahan hari ini menambah kenyamanan kalian, khususnya saat menjelajahi blog ini. Senyum! Kini, dengan nama baru 'Erik', saya ingin berbagi sesuatu yang bermanfaat dengan kalian semua.

Pada kesempatan ini, saya akan berbagi tips tentang cara membuat header blog menjadi dua kolom. Sebelumnya saya pernah menulis tentang subjek ini, yaitu teknik pembagian header menjadi dua bagian, namun saya merasa ada yang belum pas. Dengan semangat baru, saya ingin ulas topik tersebut sekali lagi sebagai 'Codepelajar'.

Bagi kalian yang penasaran dan ingin mengaplikasikannya, berikut ini langkah-langkah sederhana untuk membuat header dua kolom di blog kalian. Ayo kita mulai!

Tutorial membuat 2 kolom header

1. Masuk ke BLOGGER

2. Pilih menu TEMA

3. Pilih ikon panah > EDIT HTML

4. Cari kode CSS yang mirip dengan kode di bawah ini:

#header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor;
    height:190px;
    }
    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }

5. Ganti kode di atas dengan kode berikut:

#header-wrapper{
    width:980px;
    padding:20px 0 0 0;
    background:#000000;
    margin:0 auto;
    border:;}

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto}

    #header{
    float:$startSide;
    width:400px;
    margin:0 auto;
    border:0px solid $bordercolor;
    text-align:left;
    color:$pagetitlecolor
    }

    #header2{
    float:$endSide;
    width:400px;
    margin:0 auto;
    text-align:left;
    }

Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini:

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

Fokuskan pencarian pada kode <div id='header-wrapper'>.

7. Ganti kode di atas dengan kode berikut:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
      </div><!-- end header-wrapper -->

8. Klik simpan perubahan

9. Langkah terakhir, klik Widget dan lihat bila sudah menjadi 2 kolom.

Penutup

Mungkin itu saja yang dapat codepelajar smapaikan semoga membantu dan mudah dipahami untik sobat blogger pemula.