Untuk mengubah tampilan header ini ada dua cara, tergantung dari template yang digunakan. Pertama, mengubah gambar header jika template yang digunakan sudah memakai gambar header. Kedua, menambah gambar header jika template yang digunakan belum memakai gambar header.
Mengubah Gambar Header Pada Blogspot
- 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/AVvXsEirk7z65l8aQ-Jd7UHcM235sTZpoo8qwif59t9UAMnu1ZIxPltzDaPje72OhKGqFHXPtLvDYzx4DcRysDW_0d_5qBueCOEZr-q9GRdFmZYJp3K8P-boZglrD8rxgkHKsCWRzCrRvplhnwOa/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
- 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:
- Setelah itu upload gambar hasil buatan kedalam image hosting kamu.
- Kemudian ubah CSS header-wrapper tersebut dan tambahkan perintah background kedalamnya. Misal seperti ini:
#header-wrapper {width: 980px;height: 200px;padding-top:0px;background: url(URL gambar dari image hosting kamu) no-repeat;
} - 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.
Ok, segitu aja sob. Semoga bermanfaat dan dapat dimengerti .....

Tidak ada komentar:
Posting Komentar
Berkomentarlah dengan memberi motifasi-motifasi agar saya bersemangat untuk selalu mengupdate blog ini