Blogger Hack fixed width & height header inner Blogger Template DesignerClick here to get more tutorials!

Header blog di Blogger Template Designer (Perancang Template Blogger) memang dibuat fleksibel. Ketinggian header blog sangat bergantung kepada variabel yang ditampilkan di header seperti image yang diupload melalui halaman Tata Letak » Elemen Laman (Page Elemen), Ukuran font yang digunakan, panjang pandeknya nama blog, dan deskripsi blog.
Beberapa blogger ingin hanya menampilkan image dalam ukuran kecil di header blog yang diupload melalui elemen header di halaman Tata Letak, namun ketika image berhasil diupload, maka lebar blog title dan header blog description tiba-tiba ikut menyempit hingga justru terlihat meninggi disebelah kiri halaman blog. Dengan trik dibawah ini, semua permasalahan diheader blog akan teratasi dengan melakukan beberapa penambahan kode di bagian body. Perubahan memang terpaksa harus dilakukan melalui bagian ini karena semua pengaturan header berkaitan dengan penambahan image di blogger template designer tidak dilakukan melalui kode css yang ada diantara tag pembuka dan penutup head.

Fungsi hack fixed width, fixed height & fixed image/background height

1. Membuat header mempunyai ketinggian tetap dengan batasan tertentu.
2. Membuat width pada blog title dan blog description tak berubah sekalipun pengguna mengupload image pada header elemen (di halaman Tata Letak) dengan lebar sekecil apapun.
3. Membatasi tinggi image header blog yang diupload melalui halaman tata letak, sehingga sekalipun image mempunyai tinggi yang cukup besar maka tetap akan ditampilkan sesuai batasan tinggi yang kita buat.
4. Dengan haks pada header inner ini memungkinkan pengguna untuk membuat sebuah background image yang bukan berupa photo dan background ini akan mempu memenuhi seluruh bagian header.

Cara melakukan hack pada header inner blogger

Cara Menyimpan/menggunakan kode css

1. Login ke BloggerKlik untuk login ke Blogger!
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Expand Template Widget
   • Cari Kode :
     <div expr:style='&quot;background-image:
     
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Kode tersebut masih ada lanjutanya dengan bentuk kode keseluruhan seperti berikut:
     

     <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>

   • Jika anda hanya akan membatasi tinggi, membuat lebar tetap selebar halaman blog tanpa terpengaruh saat sebuah image berukuran kecil di upload melalui elemen (gadget) header di halaman tata letak, ganti kode di atas dengan kode berikut:
     
     

     <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat;width:100%;min-height:170px;_height:170px;background-size:auto 150px; &quot;' id='header-inner'>

   • Jika ingin menampilkan background agar bisa memenuhi seluruh bagian header blog, anda harus merubah background-repeat:no-repeat; menjadi background-repeat:repeat; , sehingga kodenya menjadi seperti berikut:
     
     

     <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: repeat;width:100%;min-height:170px;_height:170px;background-size:auto 150px; &quot;' id='header-inner'>

   • Silahkan tentukan pilihan kode yang akan digunakan untuk mengganti kode default blogger, kemudian lanjutkan dengan:
   • Simpan Template/Save Template
7. Selesai! Silahkan coba cek hasilnya mencoba mengupload image header blog melalui page elemen (halaman Tata Letak) kemudian lihat hasil perubahan kode terhadap header blog dan image yang berhasil di upload.

Keterangan/Catatan:

1. Setelah kode perubahan digunakan, anda bebas untuk menggunakan image dengan berbagai ukuran, baik kecil ataupun besar.
2. background-size:auto 150px; berfungsi untuk membatasi tinggi image hanya sebesar 150px sedang lebar akan otomatis menyesuaikan diri sesuai perbandingan besaran image sesungguhnya.
3. Selisih antara min-height dan _height dengan nilai background-size (150px) berfungsi untuk membuat sisa ruang antara image dan header bawah (image tidak tepat menempel di batas bawah header blog).
4. Beberapa pengaturan bisa anda lakukan terhadap nilai-nilai di atas untuk penyesuaian dengan box header anda!
5. Untuk mencoba sebuah background yang dibuat berulang (repeat) anda bisa menggunakan URL background ini:
   https://lh5.googleusercontent.com/-lTpu3RnxKac/UBWHc3pkMyI/AAAAAAAAC6c/pRexeo9WVEs/header_bg.jpg
6. Untuk mencoba sebuah image silahkan coba yang ini:
   https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg
7. Trik upload image header blog melalui halaman Tata letak » Elemen Laman dapat anda ikuti di sini:
   
   Trik upload image dari web (URL) di header blogKlik untuk ikuti trik upload image di header blog!