Tips Tutorial Cara Modifikasi Heading Tag H1 Semoga Dinamis Dan Seo Friendly

Jika header menampilkan gambar sebagai latar judul (gambar dan tulisan), hapus arahan yang ditandai dengan warna merah, kemudian ganti dengan arahan HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>    <h1 class='title' style='background: transparent; border-width: 0px'>      <b:include name='title'/>    </h1>    <b:else/>    <p class='title' style='background: transparent; border-width: 0px'>      <b:include name='title'/>    </p>  </b:if>

Jika header blog hanya menampilkan gambar. Agar gambar terdeteksi sebagai h1 tetapi tidak mengakibatkan multi tag h1. hapus arahan yang ditandai dengan warna oranye, kemudian ganti dengan kode. HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>    <h1 class='title'>        <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>    <b:else/>    <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>  </b:if>

Jika header hanya menampilkan judul (tulisan), hapus arahan yang ditandai dengan warna biru, kemudian ganti dengan arahan HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>     <h1 class='title'>       <b:include name='title'/>     </h1>    <b:else/>    <p class='title'>      <b:include name='title'/>    </p>  </b:if>

Jika template blog anda masih mengaktifkan tampilan seluler, hapus arahan yang ditandai dengan warna hijau (paling atas), kemudian ganti dengan arahan HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>    <h1 class='title' style='background: transparent; border-width: 0px'>      <b:include name='title'/>    </h1>    <b:else/>    <p class='title' style='background: transparent; border-width: 0px'>      <b:include name='title'/>    </p>  </b:if>

Catatan :
Silahkan ubah sesuai kebutuhan, jikalau galau ubah saja semua.

3. Mengubah judul artikel dari h3 menjadi h1 untuk halaman post dan laman. Silahkan cari arahan sepeti di bawah ini.

<b:includable id='post' var='post'>  .....  .....  .....      <a expr:name='data:post.id'/>      <b:if cond='data:post.title'>        <h3 class='post-title entry-title' itemprop='name'>        <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>          <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>        <b:else/>          <data:post.title/>        </b:if>        </h3>      </b:if>        <div class='post-header'>      <div class='post-header-line-1'/>      </div>      <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->  .....  .....  .....  </b:includable>

Hapus arahan yang ditandai dengan warna merah, kemudian ganti dengan arahan HTML di bawah ini.

<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>    <h3 class='post-title entry-title' itemprop='name'>      <a expr:href='data:post.link ? data:post.link : data:post.url'>        <data:post.title/>      </a>    </h3>    <b:else/>    <h1 class='post-title entry-title' itemprop='name'>      <data:post.title/>    </h1>  </b:if>

Tambahan khusus untuk pengguna template Blogger yang masih mengaktifkan tampilan seluler.

Cari arahan sepeti di bawah ini di dalam <b:includable id='mobile-post' var='post'>⋯</b:includable>

<h3 class='post-title entry-title' itemprop='name'>

Ubah menjadi menyerupai di bawah ini

<h1 class='post-title entry-title' itemprop='name'>

Ubah juga penutupnya </h3> menjadi </h1>

5. Pada tahap 2 judul blog pada halaman item (post dan laman), dialihkan ke tag <p>, dimana tag tersebut dipakai untuk komentar. Hal ini mengakibatkan ukuran judul blog pada halaman tersebut menjadi kecil menyerupai goresan pena pada komentar. Begitu juga judul pada artikel, alasannya ialah memakai tag h1. Ukuran judul artikel bermetamorfosis besar dan tebal layaknya judul blog. Jika ini dibiarkan tentunya akan terlihat sangat aneh.

Agar ukuran dan warna judul blog pada halaman post dan laman kembali normal'. Silahkan cari di dalam <b:skin> arahan css menyerupai di bawah ini atau yang serupa.

.Header h1 {  font: $(header.font);  color: $(header.text.color);  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);  }  .Header h1 a {  color: $(header.text.color);  }

Ubah menjadi menyerupai di bawah ini

.Header p, .Header h1 {  margin: 0;  font: $(header.font);  color: $(header.text.color);  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);  }  .Header p a, Header h1 a {  color: $(header.text.color);  }

Agar ukuran judul artikel / post menjadi normal kembali. Silahkan cari arahan css menyerupai di bawah ini atau yang serupa.

h3.post-title, .comments h4 {  font: $(post.title.font);  margin: .75em 0 0;  }

Ubah menjadi menyerupai di bawah ini

h1.post-title, h3.post-title, .comments h4 {  font: $(post.title.font);  margin: .75em 0 0;  }

Khusus untuk pengguna template responsive.

Cari arahan berikut di dalam @media screen and(max-width:.....px), Jika anda mengikuti tutorial cara menciptakan template responsive di blog ini, letak nya ada pada 768px.

.Header h1 {font-size: 30px; text-align: center}

Ubah menjadi menyerupai di bawah ini.

.Header p, .Header h1 {font-size: 30px; text-align: center}

Agar gambar berada di tengah, serta memaksa gambar mengikuti lebar layar (responsive). Tambahkan arahan berikut, letakkan saja di bawah arahan di atas.

.Header img {max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center}

Keterangan :
Kode yang ditandai dengan warna merah ialah arahan gres yang harus ditambahkan. Perhatikan tanda titik dan koma (jangan hingga tertinggal).

6. Klik Format Template, kemudian Simpan Template.

Sekian tutorial cara menciptakan heading h1 dinamis. Semoga bermanfaat dan selamat mencoba.