Memperbaiki tag h1 yang hilang saat mengganti judul dengan gambar

Tag h1 merupakan salah satu tag html yang penting di blog, karena digunakan sebagai judul utama pada sebuah blog yang mewakili seluruh topik di blog dan menginformasikan kepada mesin pencarian tentang konten di blog dan juga apa saja yang ada didalamnya. Di blogger sendiri tag h1 letaknya berada pada bagian header halaman blog, yang lebih kita kenal dengan sebutan judul blog.
Seperti yang kita tau bagian header blogger dapat dimodifikasi, salah satu modifikasinya adalah dengan mengganti judul blog dengan logo gambar yang membuat tampilan blog lebih menarik dan tentunya berbeda dengan blog-blog lainnya. Namun sayangnya ketika kita mengganti judul blog dengan logo gambar maka tag h1 juga akan ikut hilang.
Akan tetapi anda tidak perlu khawatir karena tag h1 yang hilang ini masih dapat anda perbaiki yaitu dengan sedikit memodifikasi kode HTML didalam tema yang sedang anda pakai. Untuk mengecek hasilnya, silahkan anda datangi situs-situs yang menyediakan pengecekan tag h1, jika hilang setelah mengganti judul dengan logo gambar maka segeralah perbaiki.

Cara memperbaiki tag h1 yang hilang akibat mengganti logo dengan gambar

Berikut beberapa cara memperbaiki tag h1 yang hilang akibat mengganti logo dengan gambar. silahkan anda pilih salah satu jika mengalami kegagalan.

A. Cara pertama

1. Klik Tema, Edit HTML.
2. Berikutnya anda cari kode yang mirip seperti ini.

<!--Show the image only-->
 <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>
 <!--Show the description-->
 <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
 <b:include name='description'/>
 </b:if>
 </div>

3. Ganti dengan kode berikut ini.

<!--Show the image only-->
 <div id='header-inner'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'>
 <b:include name='title'/></h1>
 </b:if></b:if>
 <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>
 <!--Show the description-->
 <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
 <b:include name='description'/>
 </b:if>
 </div>

4. Terakhir anda klik Simpan.


Jika tidak berhasil, silahkan pakai cara kedua dibawah ini.

B. Cara kedua

1. Klik Tema, Edit HTML.
2. Berikutnya anda cari kode yang mirip seperti ini.

<!--Show the image only--> <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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>

3. Ganti dengan kode berikut ini.

<!--Show the image only-->
 <div id='header-inner'>
 <b:if cond='data:blog.pageType != "item"'>
 <h1>
 <a expr:href='data:blog.homepageUrl' style='display: block'>
 <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
 </a>
 </h1>
<b:else/>
 <p>
 <a expr:href='data:blog.homepageUrl' style='display: block'>
 <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
 </a>
 </p>
 </b:if>

4. Berikutnya letakkan CSS style berikut ini diatas kode </head>

<style>
#header-inner h1, #header-inner p {
 margin:0!important;
}
#header-inner img {
 width:100%;
 height:auto;
}
</style>

5. Terakhir anda klik Simpan.

Kejadian tag h1 yang hilang setelah mengganti logo ini biasanya terjadi jika anda menggunakan tema-tema lama bawaan blogger. Jika anda menggunakan tema terbaru blogger seperti essential, notable, emporio, soho maka abaikan langkah-langkah diatas, karena tema-tema baru tersebut tidak mengalami hal serupa.

Related