
Maka selanjutnya bagaimana membuat template blogspot kita memenuhi sttruktur tag H1 H2 H3 yang baik dan benar. Berikut ini adalah cara membuat template blogspot SEO dengan langkah-langkah dibawah ini:
langkahnya adalah menuju ke dasboard blogspot
Pilih layout/tata letak - Edit HTML - centang pada Expand Widget Templates (gunakan CTRL+F pada keyboard, Untuk mempermudah pencarian kode yang akan di rubah)
1. Rubah Judul Post Dengan Tag H2
Temukan kode dibawah 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 dibawah ini:
<b:if cond='data:blog.pageType != "item"'>
<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>
2. Rubah Judul Utama Blog ( Bukan Artikel)
Cari kode dibawah ini:
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Rubah / ganti menjadi :
<b:if cond='data:blog.pageType != "item"'>
<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>
Selanjutnya cari :
<h1 class='title'>
<b:include name='title'/>
</h1>
Ganti menjadi:
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
3. Rubah kode CSS agar sesuai
Cari kode dibawah 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;
}
Rubah Menjadi:
.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;
}
Selanjutnya cari:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Ganti dengan:
#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Berikutnya cari:
h2.date-header {
margin:1.5em 0 .5em;
}
Ganti dengan (hapus H2.date-header):
.date-header {
margin:1.5em 0 .5em;
}
Yang terakhir cari kode:
<h2 class='date-header'><data:post.dateHeader/></h2>
Ganti dengan :
<div class='date-header'><data:post.dateHeader/></div>
Kemudian simpan perubahan template dengan klik tombol save. selamat mencoba, semoga sukses.
Semoga Artikel yang saia posting di blog ini bermanfaat,terima kasih..
Comments :
0 komentar to “Struktur H1, H2, H3 Yang Baik dan Benar Untuk Blogspot”
Posting Komentar