Menambah Gadget / Widget Baru pada Bagian Header Blog

Dunia desain template blog khususnya blogger, memang gak ada habis-habisnya untuk kita bahas. Salah satunya mengenai bagian header blog. Header biasanya terletak di bagian atas, terkadang terletak di atas menu navigasi horizontal blog. Untuk beberapa blog, bagian header samping, atas, atau bawahnya, biasanya dimanfaatkan untuk daerah iklan pada blog tersebut.

Untuk blog yang sudah mempunyai salah satu bagian tersebut mungkin bukan menjadi masalah untuk menambahkan iklan buat blognya. Namun, bagaimana untuk beberapa blog yang menggunakan template bawaan blogger atau template hasil download, dan tidak mempunyai bagian gadget / widget samping, atas atau bawah header blog tersebut?

Artikel ini merupakan kelanjutakan dari artikel sebelumnya dengan judul "Cara Menambahkan Gadget Baru di Blog".  Dimana pada artikel tersebut saya hanya memberikan contoh penambahan gadget pada bagian sidebar blog saja. Untuk itu artikel ini saya bikin, guna membantu teman-teman yang mungkin sedang mengalami hal diatas.

Manambahkan Widget Baru di Atas atau di Bawah Header Blog
Sebenarnya hal ini sudah pernah ditanyakan oleh salah satu teman / sahabat kita. Dan hal tersebut telah saya jelaskan / jawab pada komentar balasan. Klik disini untuk melihat cara menambahkan widget baru di atas atau di bawah header blog.

Menambahkan Gadget Baru di Samping Header Blog
Untuk yang satu ini, saya akan mengambil contoh bagian template pada artikel "Mengetahui Dasar Penyusunan Template Blog". Kamu dapat menyesuaikan saja dengan kondisi template yang kamu gunakan. Karena biasanya setiap template menggunakan bahasa css yang berbeda (terutama template standar bawaan blogger).

Agar susunan tata letak blog tidak kacau saat menambahkan gadget baru disamping header kiri blog. Ada baiknya kamu perhatikan dahulu gambar diatas.

Copy kode di bawah dan pastekan di atas ]]></b:skin> atau </style>. Jika pada css header kamu terdapat height dan width, maka silahkan kamu hapus kode printah tersebut (property dan value-nya).

#header-wrapper {
width: 900px;
height: 100px;
}
#header-left {
width: 245px;
float:left;
}
#header-right {
width: 645px;
float: right;
text-align:center;
}

Selanjutnya adalah cari kode html bagian header pada blog kamu. Biasanya kebanyakan template menggunakan class='header'. Kalau dalam kasus template yang saya pakai sebagai panduan artikel ini. Saya cukup menambahkan perintah ke dalam html yang ada.

Contoh :

<header id='header-wrapper'>
<div id='header-left'>
<h1>Judul Blog</h1>
</div>
<div id='header-right'>
Tambahkan gadget baru disini
</div>
</header>

Klik disini untuk melihat demo pada percobaan kita diatas.

Begitulah langkah-langkah penambahan gadget / widget baru pada bagian header blog. Semoga artikel ini dapat membantu kamu dalam mendesain / memodifikasi template blog. Jika ada yang belum jelas atau kurang di fahami, silahkan di tanyakan pada komentar di bawah.