Trick Ampuh Pastikan Ukuran Background Header Blogger Template Designer

Membuat background image di header blog "gampang-gampang susah", tetapi juga "susah-susah gampang". Memilih dan menentukan "image (gambar)" yang akan dijadikan background header jelas-jelas adalah awal "munculnya penyakit bingung" yang bikin kepala mot-mot-an. Banyak memang gambar yang dapat kita cari dan temukan. He.... bagus-bagus lagi! Tapi, begitu saatnya harus menentukan satu yang dirasa cocok dan pas...., uah.... bingun (he..he... bingung, broer!). Mo yang bentuk gambar pemandangan, bunga nyang bru mo mekar, lukisan abstrak, photo monyet menari, kerbau lagi berak atau ..... gambar ayam jago ma betina nyang lagi main-kejar-kejaran? He... kalian ... nggak usah terlalu njelimet mikirnya. Ambil satu gambar, buat ukurannya yang pas lalu upload di blogger dan ... segera lihat hasilnya! And .... klo bosan ... he ... buat lagi yang baru! Hiii... gampang, toh. Satu persoalan nyang bikin bingun (e...eh ... kok bingun lagi, sory ... sory ...!!) teratasi sudah. Kemudian masih ada lagi persoalan baru. Gimana, ya, cara pasangnya?! Hoo... ini mah gampang. Login aja ke blogger kemudian lakukan "Edit pada elemen header di Page Elements (Elemen Laman)". Habis ini baru satu lagi persoalan baru muncul dan benar-benar bikin kepala sedikit "mo pecah". Berapa sih sebenarnya ukuran width dan height yang diperlukan untuk "si background header blog?".

Bagi kalian yang sudah terbiasa pakai "Adobe Photoshop" memang bukan lagi jadi persoalan serius (meski mungkin tetap nggak bakalan sekali jadi membuatnya) namun bagi beberapa sobat blogger yang lain pasti ini akan jadi persoalan besar yang "akhirnya lebih sering jadi pembangkit keputusasaan". Satu yang terpenting ketika akan membuat background image di header Blogger Template Designer (Perancang Template Blogger) adalah "Jangan sekali-kali gunakan tool Susutkan agar sesuai atau dalam bahasa londo-nya Shrink to fit". Menggunakan tool ini hampir tak ada manfaatnya karena background header tak akan pernah sesuai dengan lebar dan tinggi header sesungguhnya. Jika sampeyan pernah mencobanya pasti akan tahu betapa justru blog jadi kacau balau nggak karuan.

Mengatasi persoalan menentukan width dan height background header "dengan tingkat akurasi 99,99% dapat kita lakukan dengan bantuan jQuery dan sedikit script. Sampeyan tak perlu menyimpan kodenya secara permanen karena hanya dibutuhkan untuk sekali penggunaan. Cukup copy seluruh kode kemudian simpan melalui widget HTML/Javascript (Elemen Laman | Add a Gadget | HTML/Javascript). Lanjukan dengan buka blog dan yang terakhir cari serta klik button pencari lebar dan tinggi header blog. Lha.... setelah ketemu tinggi dan lebar header-inner yang dibutuhkan untuk membuat background image, segera hapus kembali jQuery dan scriptnya.

Cara menggunakan kode

Agar lebih cepat dalam membuat background image di header blog, silahkan buka yang ini terlebih dahulu.

Tips & Trick membuat background image header blog

Setelah tuntas dengan tutorial dari link di atas, silahkan lanjutkan dengan langkah-langkah berikut ini.

1. Login ke Blogger
2. Halaman Dasbor (dasboard).
3. Pilih dan klik Rancangan (Design).
4. Page Elements. Pilih salah satu Add a Gadget (sembarang) kemudian klik
5. Setelah window baru terbuka (Add a Gadget - Tambahkan sebuah Gadget), pilih dan klik HTML/Javascript.
6. Copy dan Pastekan semua script dan xHTML ke dalam box HTML/Javascript.
7. Klik SIMPAN (SAVE).
8. Buka Blog kemudian cari dan klik button yang bertuliskan Blog Header Width. Catat berapa width header blog dan gunakan sebagai ukuran lebar (width) background image header blog.
9. Refresh blog dan lanjutkan dengan klik button yang bertuliskan Blog Header height.
10. Gunakan ukuran yang ditampilkan sebagai ukuran tinggi background header blog.
11. Segera buat background image untuk header blog sesuai ukuran width dan height yang didapatkan menggunakan software yang sampeyan punya kemudian upload melalui elemen header blog yang terdapat di Elemen Laman (Page Elemen).
12. Selesai! Dengan selesainya pembuatan bakground header bloggger template designer ini maka artinya sampeyan benar-benar sudah merasakan ampuhnya trik sederhana yang mujarab khasiatnya!

Javascript dan xHTML Pengukur Lebar dan Tinggi Header

Javascript dan xHTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<button class="geta">Header Blog Width</button>
<button class="getb">Header Blog Height</button>
<script type="text/javascript">
//<![CDATA[
function showWidth(b,a){
$("div").text("The width for the Blog "+ b+" is "+a+"px.")}
$(".geta").click(
function(){
showWidth("Header",$("#header-inner").width())
});
function showHeight(b,a){
$("div").text("The height for the Blog "+b+" is "+a+"px.")}
$(".getb").click(
function(){
showHeight("Header",$("#header-inner").height())
});
//]]>
</script>

Catatan/Keterangan

1. Semua proses di atas harus dilakukan dalam blog yang belum menggunakan background image pada header. Jika anda telah memasang background image di header silahkan dihapus terlebih dahulu karena background image yang anda gunakan akan membuat hasil yang diperoleh tidak valid!.
2. Lakukan klik button "Blog Header Width" terlebih dahulu baru kemudian refresh (reload) halaman blog anda. Setelah blog kembali terlihat klik "Blog Header Height".
3. Setelah selesai hapus kembali seluruh kode yang digunakan di widget HTML/Javascript melalui Elemen Laman.
4. Jika blog anda sudah menggunakan jQuery-1.3.2.js atau yang setara dengan fungsi jQuery tersebut, silahkan gunakan script dan xHTMLnya saja.
5. Jika anda ingin mengikuti tutorial lengkap tentang cara membuat background image pada header Bloger Template Designer, silahkan buka panduan berikut:
   Tips & Trick membuat background image header blog
6. Trick ini sudah dicoba di template Blogger "Mudah (Simple)" yang dibuat oleh Josh Peterson.
7. Bagi yang kode templatenya tak sama anda harus mencari bentuk kode header-inner nya dan sedikit mengubah script.
8. Semoga bisa mengatasi persoalan membuat ukuran background image di blogger Template Designer (Perancang Template Blogger).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Ngahad LEGI, February, 12, 2012

» Happy Blogging - gubhugreyot «