Cara Mudah Mengubah Header Blog dengan Gambar

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.

11 komentar

click to comment!

Anonim
8 Januari 2016 07.22 Delete comments

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

Reply
avatar
30 Oktober 2016 19.32 Delete comments

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

Reply
avatar
30 Oktober 2016 20.24 Delete comments

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

Reply
avatar
4 Januari 2017 12.00 Delete comments

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

Reply
avatar
4 Januari 2017 17.08 Delete comments

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

Reply
avatar
26 Januari 2018 00.09 Delete comments

Terima kasih banyak infonya mas.!

Reply
avatar
12 Februari 2018 04.08 Delete comments

Wah nambah ilmu nih, soalnya saya baru tahu cara yang kedua. mantap lah...

mampir mas ke blog saya jangan lupa juga tinggalin komennya ya hehehe...

Reply
avatar
18 Mei 2018 11.26 Delete comments

gan mau tanya kalo cara mengetahui link gambar yang kita upload di postingan gimana caranya?

Reply
avatar
4 Juni 2018 07.49 Delete comments

makasih banyak buat artikelnya....

Reply
avatar
2 Juli 2018 23.42 Delete comments

Trimakasih mas buat artikel
Sy coba praktekin dlu ya mas..
Dan satu, ijin utk jadi mentor sy ya mas..trimakasih

Reply
avatar

Setiap komentar yang diterbitkan, saya pastikan blognya sudah tak kunjungi balik, dengan atau tanpa komentar yang saya sertakan. Please bro, jangan nyampah !!

Terima kasih atas kunjungannya. Wassalam
EmoticonEmoticon

 

temukan artikelmu disini