Cara membuat Header 2 kolom dalam 2 Langkah Praktis

Cara membuat Header 2 kolom dalam 2 Langkah Praktis

Seperti yang saya katakan sebelunya bahwa pada materi Cara Membuat Template Blog Responsive dan Ringan bagian yang ke-4 ini kita akan mempelajari Cara membuat Header 2 kolom dalam 2 Langkah Praktis. Kita semua tahu bahwa desain header blog dapat disesuaikan dengan keinginan, dan tentunya ini buat kalian yang memiliki kemampuan dalam desain dan familiar dengan kode baik HTML, css, javascript, serta kode pemrograman lainya. Oleh karena itu suatu keberuntungan buat kalian yang membaca dan mengikuti update artikel Cara Membuat Template Blog Responsive dan Ringan. Dan melalui artikel-artikel tersebut saya memberikan petunjuk-petunjuk yang jelas cara menambahkan kode, cara desain, apa kode yang dibutuhkan, dan hal lain yang sangat bermanfaat untuk Mengelola Blog yang baik. Yang akan menjadi acuan kita dalam materi ini adalah untuk memperoleh desain maksimal tetapi tetap responsive dan Ringan. Dan oleh karena itu pula kita akan belajar Cara membuat Header 2 kolom dalam 2 Langkah Praktis. Karena dengan desain template yang memiliki 2 kolom memungkinkan kita untuk dapat memasang banner, iklan, logo dan sebagainya.

Untuk melanjutkan Cara Membuat Template Blog Responsive dan Ringan silahkan login dashboard blog, pilih menu Tema, dan Edit HTML. Ingat bahwa yang akan kita lakukan kali ini adalah Cara membuat Header 2 kolom, sebagai lanjutan artikel sebelumnya dimana kita sama-sama belajar Cara desain Main Content Blog dan Sidebar. Selanjutnya silahkan cari bagian style(css) dan temukan kode #header-wrapper, setelah kalian temukan kode tersebut silahkan nonaktifkan atau hapus kemudian ganti dengan kode css berikut ini:

<!-- Custom header 2 section -->
#header-wrapper{width:100%;padding:10px 0 0 0;background:#343434;margin:0 auto;min-height:120px;border:none}#header-inner{background-position:center;margin-left:auto;margin-right:auto}#header{float:left;width:38%;margin:0 auto;border:none;text-align:left;color:#b34545;float:left;padding:0 10px 10px 10px}.descriptionwrapper{font-size:18px!important;color:#FFF;padding:10px auto!important}#header2{width:60%;margin:0 auto;text-align:right;float:right;display:block}@media screen and (max-width:880px){#header-wrapper{width:100%;padding:0 10px 10px 10px;background:#343434;margin:0 auto;min-height:120px;border:none}#header-inner{background-position:center;margin-left:auto;margin-right:auto}#header{float:left;width:100%;margin:auto;border:none;text-align:left;color:#b34545;float:left}.descriptionwrapper{font-size:18px!important;color:#FFF;padding:10px auto!important}#header2{width:100%;margin:auto;text-align:left;display:block}}@media screen and (max-width:480px){#header-wrapper{width:100%;padding:0 10px 10px 10px;background:#343434;margin:0 auto;min-height:120px;border:none}#header-inner{background-position:center;margin-left:auto;margin-right:auto}#header{float:left;width:100%;margin:auto;border:none;text-align:left;color:#b34545;float:left}.descriptionwrapper{font-size:18px!important;color:#FFF;padding:10px auto!important}#header2{width:100%;margin:auto;text-align:left;display:block}}@media screen and (max-width:320px){#header-wrapper{width:100%;padding:0 10px 10px 10px;background:#343434;margin:0 auto;min-height:120px;border:none}#header-inner{background-position:center;margin-left:auto;margin-right:auto}#header{float:left;width:100%;margin:auto;border:none;text-align:left;color:#b34545;float:left}.descriptionwrapper{font-size:18px!important;color:#FFF;padding:10px auto!important}#header2{width:100%;margin:auto;text-align:left;display:block}}
<!-- End Custom header -->

Masih tetap pada editor HTML blog, silahkan gulir sedikit kebawah dan temukan kode seperti tampak dibawah ini:

<header id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1'>
  <b:widget id='Header1' locked='true' title='Cara Belajar Membuat Tema (Header)' type='Header' version='1'>...</b:widget>
 </b:section>
</header>

Setelah kalian temukan kode diatas, tempatkan kode dibawah ini tepat diatas </header>:

<!-- Header 2 coulumn -->
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
<!-- Header 2 coulumn -->

Sehingga sekarang kodenya menjadi seperti berikut:

<header id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1'>
  <b:widget id='Header1' locked='true' title='Cara Belajar Membuat Tema (Header)' type='Header' version='1'>...</b:widget>
 </b:section>
 <!-- Header 2 coulumn -->
 <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
 <div style='clear:both;'/>
 <!-- Header 2 coulumn -->
</header>

Sekarang simpan hasil perubahan yang sudah dilakukan dan coba kunjungi blog kalian. Sekarang judul blog akan berada pada header bagian kiri, sedangkan pada header bagian kanan masih kosong. Cara membuat Header 2 kolom pada artikel Cara Membuat Template Blog Responsive dan Ringan bagian yang ke-4 sudah selesai. Pada materi Cara Membuat Template Blog Responsive dan Ringan bagian yang ke-5 mendatang kita akan belajar Cara membuat Footer 3 kolom dalam 2 langkah Praktis. Ikuti terus update artikel Cara Membuat Template Blog Responsive dan Ringan untuk upgrade ilmu pengetahuan kalian tentang pembuatan template blog untuk blogspot, supaya kalian tahu bagaimana cara membuat blog keren. Karena jika kalian nantinya menjadi seorang designer atau pembuat template blog yang handal, profesional dengan karya-karya yang powerfull dan tahu Cara Mempercantik Blog Yang Baik, tahu bagaimana Cara Desain Blog Tetap Responsive. Maka dari situ kalian dapat mengumpulkan pundi-pundi rupiah bahkan dolar. Terimakasih kalian telah menjadi pembaca setia blog ini, silahkan subscribe untuk update dan penawaran menarik dari saya.

1. Materi 1 Cara Membuat Template Blog Responsive dan Ringan
2. Materi 2 Cara Membuat Template Blog Responsive dan Ringan 2
3. Materi 3 Cara desain Main Content Blog dan Sidebar
4. Materi 4 Cara membuat Header 2 kolom dalam 2 Langkah Praktis
5. Materi 5 Cara membuat Footer 3 kolom dalam 3 langkah Praktis