Membuat dynamic heading di blogspot

Pada template default blogger, headingnya tidaklah dynamic jadi blog title selalu menggunakan heading h1, tanggal pembuatan h2 dan post title malah h3. Idealnya, heading mempunyai beberapa kriteria:

• Ketika pada halaman indeks, archive, blog titlenya h1
• Dan ketika pada halaman postingan, blog title menjadi h2 dan post title menjadi h1
• Tanggal pembuatan tidak perlu heading tapi cukup span saja, atau kalau ingin pakai heading bisa menggunakan h3 ataupun h4, tergantung selera

Berikut adalah cara-cara membuat heading blog kita menjadi dynamic supaya lebih SEO friendly, untuk hasilnya bisa kalian lihat di blog ini. Pastikan kalian tidak mengubah versi mobile dari template blogspot kalian.

Langkah pertama adalah mengubah bagian blog title. Coba temukan kode berikut:

<div id='header-inner'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>

Ubahlah kode di atas menjadi seperti di bawah ini:

<div id='header-inner'>
  <div class='titlewrapper'>
    <b:include name='title'/>
  </div>
  <b:include name='description'/>
</div>

Beberapa baris di bawahnya kalian akan menemukan kode berikut:

<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>

Ubah menjadi seperti berikut:

<b:includable id='title'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl'>
        <data:title/>
      </a>
    </h2>
  </b:if>
</b:includable>

Nah bagian blog title sudah selesai, sekarang giliran mengubah heading pada tanggal postingan.

Temukan kode berikut:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
    <span>
      <data:post.dateHeader/>
    </span>
  </h2>
</b:if>

Ubahlah heading tag sesuai dengan selera, misal h3:

<b:if cond='data:post.dateHeader'>
  <h3 class='date-header'>
    <span>
      <data:post.dateHeader/>
    </span>
  </h3>
</b:if>

Yang terakhir adalah mengubah heading pada post title menjadi dynamic sesuai dengan jenis halaman, kadang h1 dan kadang h2.

Temukan kode berikut, ada dua versi yaitu versi mobile dan desktop, pastikan jangan mengubah versi mobile:

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

Ubahlah menjadi seperti berikut:

<b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
      <h2 class='post-title entry-title' itemprop='name'>
        <b:if cond='data:post.link'>
          <a expr:href='data:post.link'>
            <data:post.title/>
          </a>
          <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <a expr:href='data:post.url'>
                <data:post.title/>
              </a>
              <b:else/>
              <data:post.title/>
            </b:if>
            <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h2>
      <b:else/>
      <h1 class='post-title entry-title' itemprop='name'>
        <b:if cond='data:post.link'>
          <a expr:href='data:post.link'>
            <data:post.title/>
          </a>
          <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <a expr:href='data:post.url'>
                <data:post.title/>
              </a>
              <b:else/>
              <data:post.title/>
            </b:if>
            <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h1>
    </b:if>
    <b:else/>
    <h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'>
          <data:post.title/>
        </a>
        <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'>
              <data:post.title/>
            </a>
            <b:else/>
            <data:post.title/>
          </b:if>
          <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h1>
  </b:if>
</b:if>

Simpan perubahan dan lihat hasilnya di blog kalian, harusnya sekarang heading sudah menjadi dynamic. Langkah terakhir adalah mengubah beberapa CSS supaya tampilan tetap konsisten meskipun bergonta-ganti heading.

Gunakan tool semacam Firebug untuk mengetahui CSS dari tiap heading, misal di blog title default CSS-nya:

.Header h1 {
  font-size: 36px;
}

Maka tambahi saja menjadi seperti berikut:

.Header h1, .Header h2 {
  font-size: 36px;
}

Itulah bagaimana cara membuat dynamic heading di blogspot. Kalau ada pertanyaan bisa meninggalkan komentar di bawah ini.