Cara Membuat Dynamic Heading Pada Blog

Cara Membuat Dynamic Heading Pada Blog - Dynamic heading pada blog umumnya telah digunakan pada template yang berasal dari Blogger, namun masih ada sedikit kelemahan pada template tersebut, misalnya judul blog pada halaman posting masih berada pada posisi h1 padahal lebih bagusnya judul artikel ketika berada pada halaman posting yang berada pada posisi h1. Dynamic heading pada blog ini umumnya digunakan pada tag heading h1 h2 h3 dan terkadang menggunakan h4, tidak hanya itu saja dengan berkembangnya teknologi kini telah hadir sebuah heading tag yang baru yaitu tag h5 dan h6, dan hingga saat ini heading tag h1 h2 h3 h4 h5 h6 sangatlah berperan penting dalam blogspot, karena dengan mengatur tag heading h1 h2 h3 h4 h5 h6 akan membuat blog lebih SEO Friendly lagi.

Apa Fungsi Tag Heading H1 H2 H3 H4 H5 H6 ?

Fungsi tiap-tiap tag heading sangat berbeda-beda, tidak semuanya tag heading ini akan digunakan pada posisi yang sama misalnya, pada judul blog dan judul artikel kedua ini tentu harus menggunakan tag heading yang berbeda. Untuk lebih jelasnya silahkan baca pada artikel sebelumnya Apa Fungsi Tag Heading H1 H2 H3 H4 H5 H6.

Bagaimana Cara Membuat Dynamic Heading Pada Blog ?

Setelah paham dengan masing-masing fungsi dari tag heading pada blog, kini saatnya kita menerapkan atau mempraktekannya pada blog kita untuk mengatur tag heading h1 h2 h3 h4 h5 h6 agar lebih seo friendly. Untuk membuat dynamic heading pada blog caranya sangat mudah, tetapi Anda harus perhatikan dengan detail kode HTML yang saya berikan apakah sama atau ada perbedaan, jadi perlu hati-hati saat mengganti beberapa kode html agar tidak terjadi error saat membuat dynamic heading pada blogspot. Langsung saja simak dibawah ini cara mengatur tag heading h1 h2 h3 h4 h5 h6 atau cara membuat dynamic heading pada blog :

1. Masuk ke Blogger.com

2. Klik Template => Edit HTML

3. Cari kode seperti ini :

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

Ganti dengan kode dibawah ini :

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

4. Cari kode seperti ini :

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

 Ganti dengan kode dibawah ini :

<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' expr:title='data:blog.title'>
<data:title/>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
</b:includable>

5. Cari kode seperti ini :

<b:includable id='post' var='post'>

Lihat kebawah maka akan ada beberapa kode seperti dibawah ini :

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

Ganti kode diatas dengan kode dibawah ini :

<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' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<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>

6. Klik Simpan

Pembuatan dynamic heading pada blog sudah selesai, untuk mengatur tag heading h1 h2 h3 h4 h5 h6 silahkan cari kode seperti <h1> <h2> <h3> <h4> <h5> <h6> dan diubah dengan masing-masing kode tag heading yang Anda inginkan, saya sarankan agar membaca terlebih dahulu fungsi dari tag heading pada blog, agar tidak salah ketika akan memberi tag heading.

Sekian artikel mengenai Cara Membuat Dynamic Heading Pada Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Follow my blog with Bloglovin

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini