Cara Modifikasi Background Header Template Blogspot

Dunia blogging saat ini tak lepas dari yang namanya Menulis dan Modifikasi Blog. Gak percaya? Lihat saja dimana-mana banyak Artikel atau tuisan para blogger seputar tips dan trik modifikasi template blog. Termasuk tulisanku kali ini, seputar modifikasi background header untuk template blogspot.

Tulisan ini merupakan pengalamanku saat memodifikasi template Blog Anak Bangsa yang aku gunakan saat ini. Perlu digaris bawahi bahwa Teknik ini digunakan untuk mengubah atau menambahkan gambar header secara keseluruhan sebagai background template.

Jika sobat blogger hanya ingin mengganti gambar judul blognya saja dengan cara memasang gambar pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambarnya melalui fitur upload yang telah disediakan, selesai deh.

Tetapi teknik ini digunakan bukan hanya pada cara memasang gambar pada judul dan deskripsinya, tetapi untuk mengganti seluruh bagian backround atau latar wrapper header di blog Anda. Lalu bagaimana caranya?

1. Login ke akun blogger;
2. Pilih Edit Template, masuk ke Edit HTML;
3. Cari dengan menggunakan Ctlr + F: #header-wrapper atau yang sejenisnya. Masing-masing template tidak sama tergantung basic template yang Anda gunakan. Atribut tag ini selalu ada di bagian pengaturan header dan posisinya paling atas. Contohnya:
   
   

   #header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)
   



4. Tambahkan atribut tag berikut sebelum background-color atau Anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar saja:
   
   

   background image: url(LINK-GAMBAR);
   background-repeat: no-repeat; 
   

   
   Lebih kurang hasilnya akan seperti ini:
   
   

   #header-wrapper{ 
   background image: url(LINK-GAMBAR);
   background-repeat: no-repeat;
   background-color: #00000;
   width:975px;margin:0 auto 0;height:125px;)
   

   
   Atau aturan shorthand untuk background juga dapat digunakan seperti kode berikut:
   
   

   background:url(LINK-GAMBAR) no-repeat #000000;
   

   
   Contoh penerapannya:
   
   

   #header-wrapper{background:url(LINK-GAMBAR) no-repeat #00000; width:975px;margin:0 auto 0;height:125px;)
   



5. Simpan template
6. Selesai

Catatan: Untuk url(LINK-GAMBAR) diganti dengan link url dimana Anda menyimpan file gambar header blog. Sebelum mengupload dan memasang gambar header, edit atau pastikan ukuran gambar yang digunakan sama dengan lebar dan tinggi halaman header blog.

Semoga bermanfaat.