Cara Mudah Mengubah Header Blog dengan Gambar

Ditulis oleh: Maseteguh Blog Must Teguh Updated at : 11:46 AM
6 comments
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.

header blog

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 aplikasi photoshop, 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 fitur inspect 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 html pada 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.

mengganti header blog

4. Klik Save.

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 header dengan 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 SAY NO TO COPY PASTE, wassalam.

______________________________ ARTIKEL TERKAIT ______________________________

6 komentar:

  1. Info yang bermanfaat sekali pada artikel ini...
    Terima kasih banyak Mas..

    BalasHapus
  2. Kalau headernya menggunakan gambar apakah akan berpengaruh bagi loading blog...?

    BalasHapus
    Balasan
    1. di kompress dulu mas gambarnya, bisa lewat online kok

      kalo formatnya jpg, lewat situs JPEG Optimizer (cari di google)
      kalo formatnya png, lewat situs Compress PNG Image Online (cari juga di google)..

      usahakan ukuran filenya ngga lebih dr 10kb, biar ngga berpengaruh ke loadingnya..

      itu tips dr saya mas, moga ada manfaatnya..salam

      Hapus
  3. min saya bagi html yang lambang sosmed yang melayang di kiri gan, butuh gan buat blog ane. thx gan

    BalasHapus
    Balasan
    1. itu widget share dari SumoMe mas..cara bikinnya gampang,..tinggal daftar di situs Sumome, nanti ada kode html nya untuk dipasang pada template..
      tutorial lengkapnya banyak di Google..monggo mas Ahmad googling aja

      Hapus

Setiap komentar yang diterbitkan, saya pastikan blognya sudah tak kunjungi balik, dengan atau tanpa komentar yang saya sertakan.

Terima kasih atas kunjungannya. Wassalam