Mengubah header blog dengan gambar sendiri

Mengubah header blog dengan gambar sendiri. Mempercantik blog itu perlu agar pengunjung suka. Biasanya ini jadi aktivitas sampingan blogger saat jadwal menulis sedang off.
G4ir4h ngeblog para blogger pemula biasanya dimulai dengan menata desain blog agar lebih sedap dipandang mata. Salah satunya adalah menata display pada header.Berbagai eksperimen diterapkan demi mendapatkan gambar header yang keren dan modis.Tampilan header blog memang bisa kita ubah gambarnya sesuai dengan kreativitas Anda. Bisa dari file pribadi atau mencontek dari blog lain yang menurut Anda itu oke.Umumnya header bawaan dari template dinilai kurang artistik. Ini yang jadi alasan utama kenapa mengubah image header dianggap penting. Selain untuk menambah nilai estetika blog, header yang menarik akan memberi kesan tersendiri buat pengunjung.Bagaimana cara mengganti atau mengubah header blog dengan gambar?Bagi para senior ini masalah sepele, tidak demikian buat blogger pemula. Mereka sering kesulitan saat akan mengganti header blog dengan gambar. Don’t worry my friend, I’ll help you.

Ikuti terus artikel ini sampai habis, saya jamin Anda bisa.

Persiapan Sebelum Mengubah Header

Pertama yang mesti dipersiapkan adalah gambar atau logo yang akan dipasang. Untuk gambar, kita bisa mengambilnya dari file komputer atau mengunduh langsung dari situs penyedia gambar.

Untuk mengubah header dengan logo, silahkan berkreasi sendiri melalui aplikasiphotoshop, coreldraw atau membuatnya langsung melalui situs pembuat logo on line.

Dan satu lagi, Anda harus tahu ukuran panjang dan lebar (width dan height) header blog Anda agar nantinya gambar yang terpasang bisa ngepas posisinya. Gunakan fiturinspect element atau lihat langsung pada template Anda.

Cara Mengubah Header Blog

Ada dua cara untuk mengganti header, yaitu melalui tata letak di dasbor dan edit htmlpada template. Mari saya jelaskan satu persatu.

Mengubah header dari dasbor

1. Dari dasbor, masuk ke menu tata letak.

2. Pada slot header, klik tulisan edit. Khusus untuk header 2 kolom pilih slot yang ada nama blog Anda. Untuk header 1 kolom, langsung saja klik edit.
3. Tampilan pop up yang muncul seperti gambar di bawah ini. Ikuti sesuai urutan nomor. Pada tombol ‘choose file”, ambil gambar dari hasil unduhan atau kreasi logo buatan Anda yang tersimpan pada file di komputer.

4. klik simpang

Mengubah header lewat edit HTML

1. Dari dasbor pilih template lalu klik edit html.
2. Temukan kode #header-wrapper. Ganti kode tersebut dengan kode di bawah ini.

     #header-wrapper{background:url(http://alamat-url-                      gambar/gambar.jpg);width:952px;margin:0 auto 0;height:118px;)

Ubah tulisan warna merah dengan url gambar yang telah Anda persiapkan. Untuk ukuran headernya (tulisan warna biru) sesuaikan dengan template Anda.

Untuk mendapatkan URL gambar (tulisan warna merah), Anda harus mengupload gambar tersebut di salah satu hosting di internet. Agar lebih mudah, upload saja lewat blogger. Caranya, tambahkan gambar tersebut pada salah satu artikel Anda lalu ambil link URL nya. Setelah link didapat, hapus lagi gambar yang tadi Anda upload.

3. Berikutnya klik Pratinjau template untuk melihat preview nya.
4. Jika tidak muncul error dan hasil sudah sesuai, simpan template.

Kendala dan Solusi

Berikut beberapa masalah atau kesulitan yang mungkin muncul saat mengganti headerdengan gambar. Ikuti pula solusi yang saya berikan.

Tumpang tindih antara gambar header dengan deskripsi blog

Solusinya mudah. Cari kode #header-description, lalu tambahkan kode display:none; atau visibility:hidden; setelah itu pratinjau template, jika sudah mantap klik Save.

Tag H1 menjadi zero

Ini adalah resiko mengganti header dengan gambar, yaitu hilangnya tag H1. Tau kan kalo tag H1 harus ada dalam sebuah blog (minimal satu) ? Jadi efeknya akan buruk untuk SEO Anda.

Memang tak semua template support dengan pergantian ini. Ngga percaya? Saat selesai mengganti header, coba cek di chkme.com lalu buktikan omongan saya.

Jangan risau, solusinya begini..! Cari kode di bawah ini pada bagian body template Anda.

      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
        </a>

Jika sudah ketemu, apit kode yang saya beri warna merah dengan <H1>....</H1>. Simpan template, dan cek hasilnya.

Nah, itulah cara mengganti header blog dengan gambar. Jika Anda masih menemukan kesulitan, silahkan masukkan pada kolom komentar. Saya akan selalu siap membantu.

Semoga bermanfaat. Akhir kata Syalom <<<Koyao>>>

Share on Google Plus

About Elias Kamo

Saya sedang belajar di STMIK AKAKOM, Yogyakarta, Jurusan Teknik Informatika. Konsentrasi belajar "Desain Grapis, Permrograman Web dan Android"