Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

13 komentar:

  1. Terima kasih atas artikelnya.

    sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



    #Semoga sehat selalu :D

    BalasHapus
  2. Thanks ya gan, sekali kali mampir ke Blog ana ya...

    di www.warsimi.blogspot.com

    BalasHapus
  3. gan saya udah copas code script diatas dan header high dan width botton udah muncul tetapi high dan width nggak keliatan brapa, jd saya belum tahu ukuran untuk gambar header blog saya.
    tolong pencerahannya dengan mampir di Blog 6969 (http://blog6969blog.blogspot.com/

    BalasHapus
  4. makasih gan ... Kunjung balik yah di http://hanyakawan.blogspot.com

    BalasHapus
  5. makasih gan trik nya
    akan segera ane terapkan
    jgn lupa kunjungan balik dan follow nya ya gan di http://williancessna.blogspot.com/

    BalasHapus
  6. makasih skli, tutorialx sangat membantu, tapi gimana sih cara memperbesar ukuran header ini, krn di html saya tidak kelihatan.

    BalasHapus
  7. keren mas... membantu sekali

    BalasHapus
  8. terimakasih gan info nya :) silahkan berkunjung ke http://apanyakenapa.blogspot.com/ berisi tentang cerita-cerita pengalaman hidup saya

    BalasHapus
  9. hahahahaha sip gan mantap,saya jadi tau header blog saya,saya sempat bingung juga nih sama yang nama nya header

    BalasHapus
  10. wah makasih makasih banget banget buaanggggget gan
    agan emg sempurna

    BalasHapus
  11. Mantap gan, Turorial yang sangat mantap, ane berhasil menerapkannya di blog ane

    mampir di blog ane gan di http://dhinata28.blogspot.com

    BalasHapus
  12. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    BalasHapus

 
GR | Edited by | gubhug reyot