Cara Membuat dan Merubah Dynamic Heading Blogspot H1 H2

Membuat dynamic heading title H1 H2 pada blogspot adalah salah satu point terpenting dalam metode seo onpage. Banyak para blogger yang share tentang cara optimasi seo onpage tapi jarang mereka menerapkannya, dan bahkan mereka juga tidak memperhatikan struktur title website antara H1 H2 H3 . Nah buat kalian yang tertarik menggunakan trik saya ini untuk merubah dan membuat dymanic heading blogspot mari ikuti langkah-langkahnya.

Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot

LANGKAH PERTAMA MODIFIKASI HEADER: cari kode ini
<H1 class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</H1>


JIKA SUDAH GANTI DENGAN KODE 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>

KEMUDIAN CARI KODE BERIKUT INI:
<H1 class=’title’>
<b:include name=’title’/>
</H1>
UBAH DENGAN KODE 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>

LANGKAH KEDUA MODIFIKASI PADA POSTING:
CARI KODE INI:
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

GANTI DENGAN KODE INI:
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:post.title’>
<h2 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<H1 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H1>
</b:if>

LANGKAH KETIGA SESUAIKAN CSS:
CARI KOODE INI:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

CODE CSS POST SETIAP TEMPLATE BERBEDA JADI LIHAT CODE .POST ANDA DAN RUBAH MENJADI SEPERTI INI:
.post H1, .post h2 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post H1 a, .post H1 a:visited, .post H1 strong, .post h2 a, .post h2 a:visited, .post
h2 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post H1 strong, .post H1 a:hover, .post h2 strong, .post h2 a:hover {
color:$textcolor;
}

CARI KODE INI CSS HEADER:
#header H1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
GANTI KODE TERSEBUT MENJADI:
#header H1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Pada kode css pada setiap template tidak sama dan yang paling terpenting adalah bagaimana anda mengetahui code css posting dan code css header sehingga anda nanti mengetahui cara modifikasi code css agar sama dan rapi serta tetap menjaga tampilan blog anda.