Cara Membuat Heading H1 pada Gambar Header Blog

Kode Heading Tag H1 untuk Logo Blog Image – Artikel kali ini akan mengulas tentang Cara Mengatasi/Memperbaiki Headings H1 Zero Karena Gambar Header. Mengoptimalkan H1 harus benar-benar diperhatikan, untuk halaman depan (homepage) wajib header ber H1, sementara pada bagian postingan penuh dan halaman static menggunakan H2.

Seperti itulah maksud dari tutorial saya kali ini. Oh iya, gambar yang saya maksud adalah yang menggantikan penampilan judul blog/nama blog, yang awalnya itu adalah berupa text, namun akan diganti menjadi gambar agar terlihat sedikit bergaya. Bagi yang tertarik menerapkan cara ini, ikuti langkahnya sebagai berikut.

Kode Heading Tag H1 untuk Logo Blog Image

1. Kopi css dibawah ini dan letakkan di atas </style>

#header-left { padding:0; margin:0; width:32%; float:left;position:relative;display:block}
#header-inner {visibility:hidden}
.logo {position:absolute;left:0;top:25px;z-index:999}

2. Temukan kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> lalu ciutkan (seperti gambar berikut), kemudian hapus seluruh kode tersebut sampai ke </ b:section> dang anti dengan kode di bawah ini.

<div id='header-left'>
<div class='logo'>
<a href='https://www.bungfrangki.com' title='BUNG FRANGKI BLOG'><img alt='BUNG FRANGKI BLOG' height='66' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVJRvuwcCLNIjOjRDcwaZgoQQYX_5eV-pRGrWDVOf_zbtA2Q6XKjaDEa2j8iiXnKNo-5U7t_U_VC18VmrGpgjfaFX4p_DtY4AvT1NPpmofPkESL_MJEIMOGQtiKf6M0kUPHAtWevjofg/s1600/bungfrangki.png' width='280'/></a>
</div>
                 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                   <b:widget id='Header1' locked='true' title='BUNG FRANGKI BLOG (Header)' type='Header'>
                     <b:includable id='main'>

    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <h1 class='title'>
<b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if></b:if>
      </div>
    </div>
</b:includable>
                     <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>
</div>

Cara diatas adalah contoh yang diterapkan di Bungfrangki.com, sesuaikan dengan kode template anda.
Ganti url gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVJRvuwcCLNIjOjRDcwaZgoQQYX_5eV-pRGrWDVOf_zbtA2Q6XKjaDEa2j8iiXnKNo-5U7t_U_VC18VmrGpgjfaFX4p_DtY4AvT1NPpmofPkESL_MJEIMOGQtiKf6M0kUPHAtWevjofg/s1600/bungfrangki.png dengan url gambar blog anda.

3. Setelah semuanya rampung diperbaharui, simpan template.

Semoga cara ini berhasil diterapkan pada blog anda, selamat mencoba.

Baca Juga: