Modifikasi Header Template Default Blogger Menjadi 2 kolom

Blogger telah menyediakan template siap pakai yang mempunyai fitur-fitur menarik dan dapat disesuaikan menggunakan fitur Perancang Template Blogger. Anda bisa merubah jenis font, mengatur lebar halaman blog, mengatur jumlah sidebar, dan lain-lain semua serba mudah untuk diterapkan.

Modifikasi Header Template Default Blogger Menjadi 2 kolom
Glori Puisi

Namun beberapa blogger mungkin menginginkan fitur lebih yang tidak tersedia di Perancang Template saat ini. Dan salah satunya adalah memiliki dua kolom pada header sehingga mereka bisa menempatkan sesuatu di samping header blog. Hal ini tidak termasuk dalam fitur Perancang Template karena pada template default Blogger hanya tersedia satu kolom tunggal saja. Banyak blogger tidak ingin memiliki begitu banyak ruang kosong di samping header blog dan mereka kemudian berpikir bagaimana cara menempatkan kolon lain di samping header. Bisakah kita melakukannya? Tentu saja.

Apa saja yang ingin ditampilkan di samping header blog?

Jika Anda memiliki dua kolom pada header blog, maka salah satunya adalah untuk judul blog sementara kolom lain mungkin untuk salah satu di bawah ini.

Adsense
Sebuah iklan. Dengan Google Adsense Anda bisa memiliki iklan kontekstual atau gambar. Penempatan iklan terbaik di samping judul blog adalah iklan ukuran 728x90 atau 468x60.

Fitur Pencarian
Google Custom Search memudahkan pengunjung blog dalam menemukan artikel yang di inginkan. Tambahkan widget ini dengan fitur Tambah Gadget halaman Tata Letak blog Anda.

Social Bookmark
Tautkan tombol berbagi blog Anda pada situs-situs popular seperti Facebook, Twitter, Google+, dan lain-lain.

Jadi, Bagaimana Cara Membagi Header Menjadi 2 Kolom Pada Template Default Blogger?

Ikuti langkah-langkah di bawah ini.

Backup Template
Log in ke Blogger, klik Template pada Dropdown Menu, Klik Cadangkan/Pulihkan di sudut sebelah kanan atas, kemudian klik Unduh Template Lengkap. Hal ini dilakukan sebagai langkah antisipasi jika nanti terjadi error template, jika demikian Anda cukup mengupload ulang template cadangannya.

Memodifikasi Kode Template
Pada halaman template klik Edit HTML, kemudian temukan kode yang mirip dengan kode di bawah 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='Ellmoo Blog (Header)' type='Header'>
....
</b:widget>
</b:section>

Perhatikan kode yang dihighlight di atas, sisipkan kode di bawah ini tepat di bawah kode </b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Menambahkan Kode CSS
Untuk mengatur lebar dan tinggi kolom, tambahkan kode CSS berikut di atas kode ]]></b:skin>
#header,
body#layout #header {
  width:30%;
  display:inline-block;
  float:left; 
}
#header-right,
body#layout #header-right {
  width:65%;
  display:inline-block;
  float:right;
  padding:15px;
}
#header-right .widget {
  margin:0;
}

Simpan Template
Setelah langkah-langkah di atas tadi benar-benar diterapkan selanjutnya klik tombol Simpan Template.

Penting Untuk Iklan 728x90

Jika Anda ingin menempatkan iklan 728 x 90 pada kolom header yang tepat, Anda akan cenderung memiliki lebih dari 1000px untuk total lebar template Anda. Untuk mendapatkan itu, Anda bisa mengubahnya pada fitur Perancang Template atau langsung mengubah susunan kode template cukup mangubah nilai pada kode berikut ini.
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

—ς∞ς—

Postingan terkait:

1 Tanggapan untuk "Modifikasi Header Template Default Blogger Menjadi 2 kolom"

  1. Terima Kasih, tutorialnya sangat bermanfaat dan membantu

    ReplyDelete

Note :

1. Berikan komentar Anda yang sesuai dengan isi artikel
2. Berkomentarlah dengan bijak dan mohon untuk tidak melakukan SPAM
3. Jangan menempelkan link hidup, karena tidak akan ditampilkan

Semoga tali Silaturrahmi kita terus terjalin dengan saling berbagi informasi

Regards,
Admin Ellmoo Blog