Cara Membagi Header 2 Kolom Template Blogger Praktis

 Print This Page

Selamat datang di blog yang sederhana ini pada Sobatku semua, pada kesempata ini Admin akan berbagi tutorial mengenai Cara Membagi Header 2 Kolom Template Blogger. Template Blog adalah desain-desain blog beserta seluruh komponennya yang berupa file statsi maupun dinamis yang berupa paplikasi yang berjalan sebagai aplikasi web. Secara umum banyak yang menyebut Tema atau Tampilan Blog. Tampilan halaman yang SEO,pengunjung akan merasa betah berlama-lama di blog kita bila tampilan menarik dengan menu-menu yang mudah diakses.

Header Sebelum

Kembali diawal artikel mengenai header template blog bawaan biasanya hanya 1 header yang dapat kita isi Judul Blog serta deskripsi singkat Blog. Untuk membagi header menjadi 2 kolom, kita harus masuk ke edit HTML template Blog.

Berikut cara membagi header menjadi 2 kolom:

1. Login ke Akun Blog
2. Pilih Tema
3. Pada Tema Saya pilih Cadangkan (template ini berguna bila saat edit template terjadi error)
4. Setelah template kita cadangkan, langkah selanjutnya pilih Edit HTML
5. Temukan kode #header-wrapper, ada 2 pilih yang depan dan ganti dengan kode dibawah ini:

#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}}

    
6. Selanjutnya gulir kebawah temukan kode:

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

7. Selanjunya tambahkan kode dibawah ini dan tempatkan diatas </header>

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

8. Sehingga kode akhirnya dibawah ini:

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Judul Blog (Header)' type='Header' version='1'>...</b:widget>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</header>

9. Simpan Template

Header Sesudah

*Keterangan:

Untuk menampilkan kotak pencarian di edit HTML, klik mouse di dalam kotak edit HTML dan tekan CTRL + F secara bersamaan

TEST: Template EvoMagz v6.2.1

Sekarang kita cek di Tata Letak, Header sebelah kiri untuk Judul Blog dan header sebelah kanan Header baru (untuk tempat kode iklan)

Demikian ulasan mengenai Cara Membagi Header 2 Kolom Template Blogger, mudah-mudahan bermanfaat bagi Sobat Blogger semua. Selamat mencoba.

Berbagi :