Modifikasi Dynamic H1 H2 Title Post Blogspot

Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot - Kali ini saya akan berbagi tutorial blog penting tentang tag heading pada title blog dan title post kenapa informasi blog tutorial ini penting karena ini adalah salah satu teknik mengubah blog anda menjadi seo friendly.

Modifikasi Dynamic Tag Heading Title Blogspot

Trik modifikasi tag H1 title post dan header blog bukanlah sebuah hal yang baru, namun hal ini dapat sangat mempengaruhi kedinamisan pada sebuah blog dalam menunjukan keyword yang utama dimata search engine

Mengubah Tag Heading Blog h1 homepage H2 postpage
Pada template yang biasa penggunaan tag heading h1 selalu sama tidak rubah , biasa nya digunakan untuk title blog namun dengan cara ini dapat mengubah title tag blog menjadi dinamin mengikuti page mana yang telah dibuka oleh pengunjung

Mengubah Tag Heading Post
Saya akan jelaskan sedikit kegunaan mengubah tag heading pada post yang dimaksud ini adalah tag heading pada homepage menjadi h2 dan saat pada post page menjadi h1 kegunaan nya adalah lebih powerfull di mata SE .


tag heading blogspot
tag heading blogspot

Dynamic H1 H2 Title Post Blogspot


Untuk mengubah dynamic tag title blog anda dibutuhkan sedikit pemahaman tentang html maupun css ingat bahwa setiap template mempunyai karakteristik yang berbeda-beda sesuai pembuat template nya .


1. Memodifikasi tag heading cari kode ini

<H1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</H1>

2. Bila 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>

3. Cari kode berikut ini :
<H1 class='title'>
<b:include name='title'/>
</H1>

4. Ubah dengan kode 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>

5. memodifikasi pada posting cari kode berikut 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>

6. Ganti dengan kode berikut 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>

7. Menyesesuaikan css biasanya banyak yang gagal dalam tahap ini karena css pada setiap template berbeda-beda , cari kode berikut 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;
}

8. 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;
}

9. Cari kode css header berikut ini :
#header H1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

10. Ganti kode css diatas menjadi seperti ini :
#header H1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Itulah cara modifikasi dynamic h1 h2 title post blogspot yang perlu di ingat adalah setiap template mempunyai kriteria kode berbeda-beda sesuai dengan pembuat template , namun pada dasar nya sudah digambarkan selamat mencoba .

Pin It!

fb comment box

1 komentar:

Bung Dwijaya mengatakan...

Thanks untuk tutornya, sekarang entry title blog post udah berubah dari h3 jadi h1. Cuma untuk CSS-nya aja yang masih belum fix.

Posting Komentar

◄ Newer Post Older Post ►