Cara Mengganti Header Blog Dengan Gambar Jika H1 Zero

Cara mengganti header blog dengan gambar jika H1 zero. Jadi disini yang saya 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, ini biasa terjadi kepada blog yang telah menggunakan dinamic heading tag.

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, tapi sayangnya tidak semua template blogspot dapat /bisa dipasangi gambar logo secara langsung melalui layout/tata letak.

Bagaimana cara mengetahui template blog yang digunakan tidak support gambar/logo header?

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.

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 search engine apalagi jika blog kamu sudah menggunakan dinamic heading tag. Tapi tenang saja, karena anisuka mempunyai solusinya agar headerblog dapat dipasangi gambar header, dan disini saya membagikan 2 cara yaitu menambahkan gambar background di CSS header dan mengedit html bagian header.

1. Cara Mengganti Header Blog Dengan Gambar v1

1.Jika sebelumnya kamu sudah memasang gambar lewat tata letak, hapus dulu gambar tersebut. Siapkan gambar baru dan gambarnya harus sesuai dengan lebar element css header. 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(https://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. 

2. 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}

3. Simpan template anda dan lihat hasilnya.

2. Cara Mengganti Header Blog Dengan Gambar v2

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.

Pasang logo gambar lewat layout atau tata letak. 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>

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>

Save tamplate dan Selesai. Silahkan kamu cek kembali di chkme.

Nah silahkan kamu pilih cara mana yang kamu anggap paling gampang untuk di kerjakan. Ok sobat sekian tutorial Cara Mengganti Header Blog Dengan Gambar Jika H1 terdeteksi Zero di chekme, atau cara mengganti header blog dengan gambar untuk template yang tidak support gambar header, semoga bermanfaat.

Diposkan oleh

Brando Mewo

You Might Also Like: