Tips & Trick Cara membuat Background Image di Header Blogger Template Designer

Menggunakan Blogger Template Designer (Perancang Template Blogger) sungguh membuat penggunanya merasa nyaman. Berbagai fitur yang ditujukan untuk mempermudah pengguna melakukan berbagai editing telah disediakan. Salah satu diantaranya adalah untuk membuat atau memasang background header blog. Background header berfungsi sebagai latar title blog dan deskripsi blog yang letaknya di ujung paling atas. Anda bisa menggunakan background color atau background image. Jika anda menyukai background image sebagai latar header, persiapkan saja sebuah background image berukuran sedikit lebih kecil dari lebar blog (lebar body) dan tingginya sesuai dengan box header-inner. Tinggi Header inner berkaitan dengan ukuran font, jenis font, ketebalan font title blog dan deskripsi blog serta berapa panjang deskripsi title blog yang digunakan. Nah... ketika sampai pada masalah perhitungan lebar dan tinggi header-inner inilah akan terasa betapa pentingnya untuk mengetahui cara mencari ukuran sebenarnya dari header inner berikut background yang akan digunakan.

Beberapa hal yang perlu diperhatikan untuk membuat background header blog adalah:

1. Pastikan berapa lebar body (blog) yang digunakan (body width).
2. Pastikan ukuran font, tebal font dan font-family yang digunakan sebagai title blog dan deskripsi blog. Jika anda membutuhkan panduan membuat blog description (deskripsi blog) silahkan buka link berikut:
   Cara Buat Blog Description
3. Usahakan untuk tidak merubah deskripsi blog selama blog aktif (digunakan) karena perubahan mengharuskan kita untuk kembali merubah tinggi background image.
4. Pastikan apakah akan menggunakan header description atau tidak. Deskripsi blog yang max berjumlah 500 huruf akan berpengaruh kepada tinggi header inner dan ini berkaitan erat dengan tinggi background image yang akan digunakan.

Cara mengetahui lebar body melalui fitur Template Designer

1. Untuk login klik di sini !Login di Blogger. Jika anda mennggunakan google mail (gmail), login cukup dilakukan dengan menuliskan user name dan password, namun jika bukan dari gmail tuliskan alamat email secara lengkap.
2. Setelah login dilakuka anda akan memasuki halaman dasbor (dasboard) yang di dalamnya berisi beberapa fitur , seperti posting, Stats, Rancangan (Design), Comments (Komentar, Settings (Pengaturan) dll.
3. Fitur Design (Rancangan) akan menghubungkan pengguna dengan fungsi edit template. Fungsi editing berada di Rancangan | Elemen Laman (Design | Page Elements) dan di Rancangan | Edit HTML (Design | Edit HTML). Klik "Design (Rancangan)".
4. "Ada tiga cara untuk mengetahi lebar body. Cara termudah adalah melalui fitur "Template Designer (Perancang Template". Silahkan klik "Template Designer (Perancang Template"
5. Setelah window baru terbuka (Blogger Template Designer (Perancang Template Blogger)). KlikAjust Widths (Sesuaikan Lebar).
6. Silahkan anda lihat berapa lebar body blog anda. Karena di luar ini masih ada margin atau padding, kurangilah lebarnya sebesar 40px. Jadi jika width yang terlihat sebesar 940px, maka lebar background image-nya menjadi selebar 900px.
   Keterangan: Jika belum tepat bisa anda tambah atau kurangi sedikit demi sedikit.
7. Untuk tingginya bisa anda perkirakan berdasar blog title dan description blog.

Cara lain untuk mengetahui width & height background image

1. Melalui Box Edit HTML yang dapat di buka melalui:
   Dasboard | Design | Edit HTML.
2. Melihat lebar body dengan melihat Source Code setelah blog dibuka di browser.
3. Menggunakan Software (Adobe Photoshop). Caranya dengan membuka blog kemudian salin gambar yang terlihat di layar PC menggunakan Adobe Photoshop. Ini adalah cara terbaik dan sangat akurat, hanya anda perlu memberi warna background color terlebih dahulu pada header blog agar detail lebar dan tinggi header-inner terlihat!
4. Menggunakan Javascript. Anda bisa langsung mengetahui secara tepat berapa tinggi dan lebar yang diperlukan bagi background image header blog. Cara ini mempunyai tingkat akurasi sangat tinggi (99,9999%). Dapatkan link tutorialnya di ujung terbawah posting ini pada Catatan/Keterangan.

Cara pasang background Image di Header Blog (Background Hreader Blog)

1. Setelah mengetahui berapa ukuran width background image yang diperlukan melalui langkah di atas, klik "Back to Blogger (Kembali ke Blogger)".
2. Anda akan kembali di Elemen Laman (Page Elements). Klik EDIT pada elemen Header.
3. Configure Header (Mengkonfigurasi Header)
   
   • Klik Browse jika image dari folder PC.
   • Tuliskan Alamat background image jika image tersimpan di file hosting atau mungkin anda sudah upload di box posting.
   • Klik pada Dibalik judul dan keterangan (Behind title and description).
   • Setelah langkah di atas, background image akan terlihat dalam box "Configure Header (Mengkonfigurasi Header)".
4. Klik SAVE (SIMPAN).
5. Buka blog dan lihat hasilnya!

Contoh Background Header Blog

Anda bisa menggunakan image di bawah ini untuk melakukan percobaan terlebih dahulu.

1. http://gubhugreyot-images.googlecode.com/files/gubhugreyot_bridge-920-200.jpg
   image berukuran: 920px (width) dan 230px (height).
2. http://gubhugreyot-images.googlecode.com/files/gubhugreyot-sunsetmountainpano-final.jpg
   image berukuran: 920px (width) dan 200px (height).

Catatan/Keterangan Penting
Ada sebuah cara untuk mengetahui seberapa besar ukuran lebar (width) dan tinggi (height) background image yang diperlukan bagi header blog. Trick ini mempunyai tingkat akurasi sangat tinggi sehingga anda bisa membuat sebuah background dengan ukuran sangat tepat. Anda tak perlu menggunakan software khusus tetapi hanya perlu memasang sedikit script dan jQuery kemudian buka blog untuk klik pada button "Header Blog Width" dan "Header Blog Height". Lebar dan tinggi akan terpampang di halaman. Gunakan ini sebagai ukuran background image header blog. Silahkan klik link di bawah ini untuk mencoba trik-nya:
Trik ampuh untuk menentukan ukuran background header