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.
Cara Membuat Header Blog dengan Gambar dan Terdeteksi H1

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.
Cara Membuat Header Blog dengan Gambar dan Terdeteksi H1

<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://2.bp.blogspot.com/-TAcB24uWfuo/VObwNKAJVXI/AAAAAAAADcQ/eVTx6lqjrRE/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://2.bp.blogspot.com/-TAcB24uWfuo/VObwNKAJVXI/AAAAAAAADcQ/eVTx6lqjrRE/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.
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
Mulai dari
Rp15K
/Bulan

IDCloudHost

View Details
  • Free SSL Certificate
  • LiteSpeed Enterprise dan Load Balancer
  • Unlimited Email
  • cPanel Control Panel
Visit Site
Tersedia Cloud VPS termurah, hanya Rp68 /jam
Free and premium blogger templates