Cara Gampang Mengatasi Tag H1 Hilang Dikala Memakai Image Untuk Header Blog
Salah satu cara mempercantik tampilan blog yakni dengan memakai image untuk header blog. Hal ini dapat di lakukan pada template default Blogger dan pada beberapa template custom yang masih memakai isyarat <header/> default Blogger.Namun sayang, dengan memakai image untuk header blog, maka tag H1 menjadi hilang. Sementara keberadaan tag H1 sangat diperlukan untuk menunjang seo blog. Sebagai misalnya ibarat gambar di bawah ini, tag H1 menghilang dari header blog sehabis memakai image untuk header blog.
Bagi yang sudah dapat koding, tentu hal ini sangat gampang diatasi, namun bagaimana bagi yang belum andal koding?
Dan tag header yang direkomendasikan hingga ketika ini yakni memakai tag header yang dinamis, artinya di halaman postingan memakai judul postingan untuk tag H1 sementara di halaman selain halaman postingan memakai judul blog untuk tag H1. Sementara untuk tag H2, H3, dan seterusnya bebas dipakai untuk element lainnya dan dapat lebih dari satu.
Silahkan pelajari cara menciptakan header dinamis dari postingan Maskolis, hampir semua blog kini memakai tag header dinamis dari Maskolis tersebut.
Nah supaya tag H1 tidak menghilang ketika memakai image untuk header blog dan menjadi dinamis (menjadi tag H1 di halaman utama dan bermetamorfosis tag p di halaman postingan, sehingga tag H1 tidak menjadi 2 buah di halaman postingan), ada cara gampang untuk mengatasinya.
Agar menjadi ibarat gambar di atas, kita hanya perlu melaksanakan satu langkah mudah. Silahkan cari isyarat ibarat di bawah ini di edit HTML.
<!--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>
Kemudian silahkan ganti dengan isyarat di bawah 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>
Kemudian tambahkan CSS di bawah ini untuk menghilangkan margin dari tag H1 dan tag p supaya image header pas di header. Silahkan simpan di atas isyarat
</head> <style>
#header-inner h1, #header-inner p {
margin:0!important;
}
#header-inner img {
width:100%;
height:auto;
}
</style>Setelah itu save edit HTML, kemudian silahkan upload image untuk header blog melalui gadget header di Tata Letak kemudian klik edit dan pilih option Instead of title and description.
Sebenarnya saya sudah memposting beberapa cara untuk mengatasi tag H1 yang hilang ini, coba saja ketikan Header Blog di kotak pencarian di blog ini. Namun postingan ini yang paling gampang dilakukan.
Sumber https://www.kompiajaib.com/
0 Response to "Cara Gampang Mengatasi Tag H1 Hilang Dikala Memakai Image Untuk Header Blog"
Posting Komentar