Design Template: Header dua Kolom

Kembali saya sharing tentang Design Template(Baca: Paket Tutorial Design Template), setelah kemarin saya sharing tentang Blogger Tricks dan menulis artikel tentang Blogger Indonesia Dukung Internet Aman, Sehat & Manfaat. Nach, kali ini tutorialnya focus pada header dan tepatnya membagi header menjadi dua kolom
header dua kolom

Fungsinya adalah untuk menambahkan widget pada header blog anda, disana anda bisa meletakkan artikel-artikel terpopuler anda, menambahkan pesan khusus yang disampaikan kepada pengunjung anda, atau meletakkan iklan bagi yang suka monetize blog.

Berikut tutorialnya:
  • Login ke Blogger.com
  • Kemudian Tata Letak
  • Pilih Edit HTML
  • Centang Expand Widget
  • Backup dulu template anda untuk berjaga-jaga bila terjadi kesalahan bisa dikembalikan seperti semula
  • Percobaan saya pada template Minima yang memiliki lebar header-wrapper 660px
lebar header-wrapper template minima

  • Setelah itu, ganti lebar header menjadi 360px dan float menjadi left

  • Sekarang buat kode untuk header kedua yaitu disebelah kanannya float:right
#header2 { float:right; width:250px; }
  • Kemudian Copas dibawah kode header pertama

  • Selanjutnya Copas kode berikut dibawah </b:section> pada <div id='header-wrapper'> seperti berikut:
Kodenya:
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
  • Setelah itu, Save Template anda..
Tutorial diatas hanyalah sebagai gambaran saja buat anda, silahkan berkreasi sendiri sesuai selera anda..
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.