Membagi Header Menjadi 2 Kolom Pada Template Standar

Banyak sekali cara untuk modifikasi Header yaitu untuk mempercantik tampilan blog maupun sekedar menambah fungsi atau maksimalisasi fitur blog. Pada kesempatan ini, saya akan bagikan kepada sobat blogger tentang Membagi Header Menjadi 2 Kolom Pada Template Standar.

Pada postingan kemarin saya sudah membahas cara ini yaitu Menambahkan Elemen Baru di Samping Header, namun tidak pada template standar. Terkait dengan pertanyaan sahabat blogger tentang bagaimana cara membagi header menjadi 2 kolom pada template standar. tentu pada postingan yang kemarin jika diterapkan pada template standar akan susah dan juga membingungkan, karena kode2 yang dicari/diedit tidak sama dengan yang ada pada tutorial sebelumnya, untuk itu, saya posting artikel ini khusus untuk modifikasi header pada template standar. Mohon disimak dengan baik.

Jika sobat berhasih, Hasil Screenshot akan seperti gambar ini :

 Cara Membagi Header Menjadi 2 Kolom Pada Template Standar

1.   Login ke blogger

2.   Masuk Template >> Backup dulu template sobat, untuk berjaga2 kalo ada error.

3.   Klik edit HTML

4.   Kemudian cari kode seperti berikut :

/* Header

----------------------------------------------- */

.header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

  _background-image: none;

}

.Header h1 {

  font: $(header.font);

  color: $(header.text.color);

  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

.Header h1 a {

  color: $(header.text.color);

}

.Header .description {

  font-size: $(description.text.size);

  color: $(description.text.color);

}

.header-inner .Header .titlewrapper {

  padding: 15px $(header.padding);

}

.header-inner .Header .descriptionwrapper {

  padding: 0 $(header.padding);

5.   Hapus/Ganti dengan kode dibawah ini :

/* Header

----------------------------------------------- */

.header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

  _background-image: none;

}

#header-wrapper {

margin:0 auto 0px;

height:70px;

}

#head-inner {

width:285px;

background-position: left;

text-align: justify;

margin-left: auto;

margin-right: auto;

float:left;

}

#header-kanan{

width:485px;

float:right;

}

#header h1 {

  color: $(header.text.color);

margin: 0px;

text-align: left;

}

.Header h1 a {

  color: $(header.text.color);

}

Silahkan Di atur ukuran lebarnya sesuai yang sobat inginkan, agar bisa pas dengan lebar headernya.

6.   Kemudian Cari kode seperti Berikut ini :

<header>

    <div class='header-outer'>

    <div class='header-cap-top cap-top'>

      <div class='cap-left'/>

      <div class='cap-right'/>

    </div>

    <div class='fauxborder-left header-fauxborder-left'>

    <div class='fauxborder-right header-fauxborder-right'/>

    <div class='region-inner header-inner'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

</b:section>

    </div>

    </div>

    <div class='header-cap-bottom cap-bottom'>

      <div class='cap-left'/>

      <div class='cap-right'/>

    </div>

    </div>

    </header>

 

7.    Hapus/Ganti kode diatas dengan kode berikut

<header>

    <div id='header-wrapper'>

<div id='head-inner'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>

</b:section>

</div>

<div id='header-kanan'>

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

</b:section>

</div>

</div>

    </header> :

8.   Klik pratinjau untuk menentukan bahwa tidak ada yang error pada kode.

9.   Jika sudah berhasil tampil pratinjaunya, Klik Simpan/Save Template.

Untuk melihat hasilnya, silahkan sobat menuju ke halaman, Tata Letak. Lihat pada Header, apakah sudah muncul elemen baru disamping header apa belum. Dan bila ada masalah, silahkan luangkan di kolom kementarnya atu bisa like facebooknya.

Semoga postingan tentang Membagi Header Menjadi 2 Kolom Pada Template Standar ini bisa bermanfaat dan menambah ilmu buat sobat semuanya. Happy Blogging Sobbbbbbbbb.....

SILAHKAN GUNAKAN FACEBOOK COMMENTARNYA JIKA TIDAK MEMILIKI URL BLOG ATAU SITUS LAINNYA SOB...?? TRIMAKASIH.