Cara Menambah Image Header Dengan Desain Kamu Sendiri

Kemungungkinan banyak teman di antara teman-teman merasa tampilan blog headernya terlihat seperti biasa dan tulisan judul blognya hanya sebatas text dengan jenis dan warna huruf yang terkesan monoton.

Cara Menambah Image Header Dengan Desain Kamu Sendiri

Sebagai contoh pada cara ini saya menggunakan template Art Template.

Dari dasbor, pilih Rancangan - Edit HTML.

Lakukan duplikasi template untuk jaga-jaga jika bermasalah.

Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:

#header {
width: 1000px;
height: 176px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOnjiyrX9OIp29wEfIGJc_yi-MqgIcqbNKoP6KtGvCnDuajLtRRDQObw8GMykKzIVg1dAJf12B6MuklyaOJMevCT8vO3qvBdbgELzdBVjfWI7GtBxMIT7D7I55bPQ-mYi2gVf7CsfCFxr/s1600/header_bg.jpg) no-repeat;
}

Copy-paste URL gambar header template kamu pada address bar, lalu simpan gambar ke harddisk.
Misalnya URL gambar header pada CSS Art Template di atas seperti ini:

Edit gambar tersebut dengan aplikasi gambar, misalnya jadi seperti ini:

Setelah itu upload gambar hasil edit kedalam image hosting kamu.

Kemudian ubahlah URL gambar pada CSS tadi dengan URL gambar dari image hosting kamu.

Selanjutnya carilah kode berikut (supaya mudah, cari id='Header1'):

<b:widget id='Header1' locked='true' title='Judul Blog Kamu (Header)' type='Header'/>

Hapus kode tersebut lalu Simpan Template.

Menambah Gambar Header Pada Blogspot

Untuk template yang tidak ada gambar header-nya saya mengambil contoh dari template Amoebaneo.

Langkah 1 dan 2 sama dengan di atas.

Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:

#header-wrapper {
width: 980px;
height: 70px;
padding-top:20px;
}

Dengan melihat ukuran pada CSS tersebut, buatlah gambar berukuran lebar=980px dan tinggi sesuai keinginan.
Misal gambarnya seperti ini, dengan ukuran 980 x 200: