Latest News

Cara Mudah Mengubah Header Blog dengan Gambar

Mengubah header blog dengan gambar sendiri. Mempercantik blog itu perlu supaya pengunjung suka. Biasanya ini jadi acara sampingan blogger dikala jadwal menulis sedang off.

G4ir4h ngeblog para blogger pemula biasanya dimulai dengan menata desain blog supaya lebih sedap dipandang mata. Salah satunya yaitu menata display pada header. Berbagai eksperimen diterapkan demi menerima gambar header yang keren dan modis.

Tampilan header blog memang mampu 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 problem sepele, tidak demikian buat blogger pemula. Mereka sering kesulitan dikala akan mengganti header blog dengan gambar. Don’t worry my friend, I’ll help you.

Ikuti terus artikel ini hingga habis, aku jamin Anda bisa.

header blog

Persiapan Sebelum Mengubah Header


Pertama yang mesti dipersiapkan yaitu gambar atau logo yang akan dipasang. Untuk gambar, kita mampu mengambilnya dari file komputer atau mengunduh eksklusif dari situs penyedia gambar.

Untuk mengubah header dengan logo, silahkan berkreasi sendiri melalui aplikasi photoshop, coreldraw atau membuatnya eksklusif melalui situs pembuat logo on line.

Dan satu lagi, Anda harus tahu ukuran panjang dan lebar (width dan height) header blog Anda supaya nantinya gambar yang terpasang mampu ngepas posisinya. Gunakan fitur inspect element atau lihat eksklusif 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 aku jelaskan satu persatu.

Mengubah header dari dasbor


1. Dari dasbor, masuk ke menu tata letak.

2. Pada slot header, klik goresan pena edit. Khusus untuk header 2 kolom pilih slot yang ada nama blog Anda. Untuk header 1 kolom, eksklusif saja klik edit.

3. Tampilan pop up yang muncul ibarat 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 aba-aba #header-wrapper. Ganti aba-aba tersebut dengan aba-aba di bawah ini.

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

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

Untuk menerima 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 problem atau kesulitan yang mungkin muncul dikala mengganti header dengan gambar. Ikuti pula solusi yang aku berikan.

Tumpang tindih antara gambar header dengan deskripsi blog

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

Tag H1 menjadi zero

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

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

Jangan risau, solusinya begini..! Cari aba-aba di bawah ini pada bab 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 aba-aba yang aku 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.