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.

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'/>

—ς∞ς—

Tweet

Postingan terkait:

Ditulis EM — Saturday, 4 May 2013 — 1 Comment — Blogger Hacks