Cara Mengganti/Menambahkan Gambar pada Header di Blogspot

      
Salah satu cara membuat blog menjadi lebih menarik adalah dengan mengganti gambar pada header seperti gambar di samping ini. Apalagi kalau menggunakan template gratis yang disediakan oleh pihak lain, maka banyak yang harus disesuaikan, bukan hanya header, tapi juga lebar blog dan yang lainnya.

Pada kesempatan ini, saya ingin berbagi tips mengganti gambar pada header blogspot seperti yang saya lakukan pada blog ini. Mudah-mudahan bisa berguna bagi anda.


Langkah pertama, sebelum kita membuat gambar header dengan menggunakan software manipulasi gambar seperti photoshop, gimp atau yang lainnya, kita harus mengetahui lebih dahulu ukuran gambar yang harus dibuat. Ini agar gambar yang dibuat nantinya sesuai dengan ukuran header, jadi tidak akan kebesaran atau kekecilan. Caranya sebagai berikut:

- Masuk ke akun blogger anda.

- Klik Tata Letak, lalu Edit HTML.

- Pada listing HTML template anda, cari kode: #header-wrapper. Tulisannya kurang lebih seperti ini:

#header-wrapper { background:transparent url(http://www.templatesimages.com/images/Inove/bg.jpg) no-repeat scroll 0 0; border-bottom:1px solid #A6A6A6; height:90px; margin-bottom:-13px; width:936px; }

- Perhatikan nilai dari width dan height, keduanya merupakan ukuran dari header. Ukuran ini yang digunakan membuat gambar header. Pada listing HTML di atas kita peroleh width = 936 pixel dan height = 90 pixel. Jadi ukuran gambar header yang akan anda buat adalah 936 x 90 pixel.

- Oke, setelah anda mengetahui ukuran gambar header, sekarang waktunya anda membuat gambar yang bagus disesuaikan dengan topik blog anda.

Langkah kedua, tentunya anda harus membuat gambarnya, bisa pake photoshop, gimp, paint.net, atau yang lainnya. Terserah anda. Kalau saya, karena sudah terbiasa pake Gimp, ya menggambarnya pake Gimp saja.

Kalau kalian mau, bisa juga menggunakan gambar yang sudah ada, kemudian tinggal dimodifikasi saja. Dari kode HTML di atas kita bisa dapatkan gambar headernya adalah http://www.templatesimages.com/images/Inove/bg.jpg. Ini didownload saja, kemudian nanti diedit pakai photoshop atau lainnya.

Langkah ketiga, setelah gambar untuk header telah jadi, maka sekarang waktunya anda mengupload gambar tersebut. Anda bisa menggunakan website hosting gambar mana saja yang anda sukai. Kalau saya menggunakan ImageShack (http://imageshack.us/) sebagai tempat upload gambar. Jangan lupa untuk mengambil link url dari gambar tersebut untuk ditempatkan di dalam kode HTML template.

Langkah keempat, yang terakhir kita akan mengganti kode pada tempate agar gambar tersebut muncul sebagai gambar header. Caranya mirip pada langkah pertama di atas, kita login ke blogger.com, lalu klik Tata Letak lalu Edit HTML. Kemudian cari tulisan #header-wrapper, anda akan mendapatkan seperti di bawah ini:

#header-wrapper { background:transparent url(http://www.templatesimages.com/images/Inove/bg.jpg) no-repeat scroll 0 0; border-bottom:1px solid #A6A6A6; height:90px; margin-bottom:-13px; width:936px; }

- Pada bagian background, ganti url-nya menjadi url gambar anda. Pada listing HTML di atas url yang harus diganti adalah pada tulisan berwarna merah. Jika anda tidak menemukan background di dalam #header-wrapper tempate anda, maka harus menuliskan kode background tersebut secara lengkap seperti pada listing di atas. Jangan lupa mengganti url-nya dengan url gambar yang telah anda upload.

- Setelah itu simpan template, dan lihat hasilnya.