Cara Mengubah Dan Menambah Image Header Dengan Buatan Sendiri

Mengubah Gambar Header Pada Blogspot

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/AVvXsEgHpGIjTCfT9iVTmbFmxPR4q-GbrNw7xgaaORrLm4X9dzbDjaOIASV2UQbNHJww4Cin6U8GTimqqnUfAnc2qWAHQOQ6UEBXGOiUbNSNsl9DNep9Y7GOwyNrqFrFgw76iKsI1wDTT1LrWZK2/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.

Sebagai contoh dari hasil editing gambar header Art Template di atas dapat dilihat pada blog ini.

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:
  
• Setelah itu upload gambar hasil buatan kedalam image hosting kamu. 
• Kemudian ubah CSS header-wrapper tersebut dan tambahkan perintahbackground 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.

Selamat Mencoba !

Bagikan Artikel ini