Membuat header menjadi dua kolom

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:



Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik rancangan
3. Klik Edit HTML
   
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti yang mirip beikut:

   ---

   /* Header
   ----------------------------------------------- */
   #header-wrapper {
   width:930px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }

   ---

6. Ganti semua kode diatas dengan kode berikut:

   ---

   /* Header
   ----------------------------------------------- */
   #header-wrapper {
   width:930px;
   margin:0 auto 0px;
   background:#ffff;
   height:180px;
   }
   #header-one {
   width:50%;
   background-position: left;
   margin-left: auto;
   margin-right: auto;
   float:left;
   }
   #header {
   margin: 0px;
   text-align: left;
   color:$pagetitlecolor;
   }
   #header_two{
   width:50%;
   float:left;
   padding-top:10px;
   }

   ---

   Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:

   ---

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

   ---

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

   ---

   <div id='header-wrapper'>
   <div id='header-one'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header_two'>
   <b:section class='header' id='header2' preferred='yes'/>
   </div>
   </div>

   ---

9. Klik Simpan Template
10. Selesai
    

Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!


BACA JUGA!
- Membuat buku tamu/shoutmix tersembunyi
- Tabel kode warna css
- Cara mudah Memasang shoutmix bersama
- Cara memasang widget alexa pada blog
- Cara meningkatkan alexa rank blog
- membuat kotak daftar isi blog
- Cara Mengukur seberapa berat blog/web kamu
- Cara supaya domain co.cc bisa diakses tanpa www(redirect tanpa www)
- Merubah Domain Blogspot menjadi co.cc
- Membuat scroll pada komentar blog
- Fungsi Gadget Followers pada Blog
- Cara mudah memasang meta tag blogger
- Mengubah tampilan iklan kumpulblogger
- Cara membuat label menjadi berwarna
- Membuat widget hanya muncul pada postingan
- Cara membuat daftar isi otomatis pada blogger
- Membuat Menu Horisontal pada blogger
- Membuat Breadcrumb Navigation pada blogger
- Cara membuat widget hanya tampil di homepage
- bertukar link dengan adil
- Membuat 3 kolom element dibawah header
- Membuat dua element dibawah header
- Cara menghapus komentar blog
- Cara membuat navbar auto hidden

Terima kasih telah membaca artikel Membuat header menjadi dua kolom.Silahkan baca artikel INFONETMU tentang tips blog yang lainya dibawah ini!

Comment With Facebook!