Berikut ini adalah cara mengganti header blog dengan gambar jika H1 zero. Jadi disini yang di maksud H1 Zero adalah jika kita mengganti header blog / menambahkan gambar pada header melalui layout Blogger dan ternyata template yang kita pasangi gambar itu tidak support dengan gambar header blog.

Header Blog adalah bagian paling atas pada sebuah situs yang berisi logo situs, nama situs, menu, tempat pencarian, lokasi situs, media iklan dan sebagainya,apabila pada elemen header ini tidak menarik, langkah yang pas adalah dengan mengkombinasikan warna serta memberi/ menambahkan gambar dan memasang logo ciri khas blog kamu.

Sayangnya tidak semua template blogspot dapat dipasangi gambar logo secara langsung melalui layout/tata letak. Hal ini biasa terjadi pada template Blogger yang telah di optimasi menggunakan dinamic heading tag.

H1/ Header Blog Tidak Support Gambar/ Logo?


Untuk mengetahui template yang kamu gunakan support gambar/logo header atau tidak, kamu dapat mengujinya dengan memasang gambar di template blog melalui bagian "tata letak", kemudian silahkan cek di chkme.com, lihat apakah muncul pesan peringatan seperti dibawah ini?

H1 Zero, that is Really Bad
Warning: Make sure you have a las one H1 tag: it represent the headline of your content/website.

Mengatasi Masalah H1 Zero, that is Really Bad
H1 Zero, that is Really Bad

Jika seperti diatas maka dapat dipastikan template kamu tidak support untuk dipasangi gambar Header karena h1 di blog kamu jadi hilang atau tidak terdeteksi dan akibatnya akan buruk nanti di SERP.

Tapi tenang saja, karena blog ini mempunyai solusinya agar headerblog dapat dipasangi gambar header. Disini saya membagikan 2 cara yaitu menambahkan gambar background di CSS header dan mengedit html bagian header.

Cara 1: Mengganti Header Blog Dengan Gambar


1. Siapkan gambar baru dan gambarnya harus sesuai dengan lebar element css header.
2. Kemudian tambahkan gambar dan kode "overflow:hidden" tersebut pada CSS header-wrapper  sebagai backround pada edit HTML. Misalnya css header kamu seperti dibawah ini ( kode berwana merah #header-wrapper di bawah bisa saja mempunyai nama yang berbeda di blog kamu)

#header-wrapper{background:url(http://3.bp.blogspot.com/-fSb0Ff5MGw0/UUcdKx6ApUI/AAAAAAAAXsA/qjZ63XQ3hF4/s1600/header+kompidotcom.png);width:980px;max-width:100%;min-
min-width:100%;max-hight:100px; background-position: center;
background-size:100%; background-repeat: no-repeat;overflow:hidden
}

Pada css diatas lebarnya adalah 980px dan tinggi 100px, jadi gambar yang harus kamu pasang ukurannya 980x100px (baca juga  cara membuat logo header secara online). Warna biru ganti dengan link gambar kamu. Warna hijau adalah kode yang di tambahkan. 

3. Langkah berikutnya tambahkan kode untuk menyembunyikan title yang menghalangi background dengan "visibility:hidden" (tanpa tanda kutip) pada kode CSS header berkutnya. Contohnya adalah seperti kode dibawah ini:

#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}

4. Save dan lihat hasilnya.

Cara 2: Mengganti Header Blog Dengan Gambar


Mungkin saja cara yang pertama tadi agak sulit dan membuat kamu bingung karena bisa saja nama elemt css di blog kamu berbeda, maka kamu dapat mencoba cara ini.

1. Pasang logo gambar lewat layout atau tata letak.
2. Selanjutnya masuk ke edit HTML template dan temukan/cari kode seperti dibawah ini:

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

3. Replace atau ganti dengan kode dibawah ini:

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

4. Save tamplate dan Selesai.

Ok sobat sekian tutorial cara mengganti header Blog dengan gambar jika h1 terdeteksi zero di chkme, Semoga bermanfaat.
0 Komentar untuk "Cara Mengganti Header Blog Dengan Gambar [ H1 Zero that is Really Bad ]"