Cara Membuat dan Merubah Dynamic Heading Blog

Cara Membuat & Merubah Dynamic Heading Blog - Merupakan salah satu unsur ter[enting dalam SEO, mungkin banyak blog yang sudah membahas masalah ini namun mungkin dari mereka menghiraukan susunan title website antara H1 H2 H3. Nah mungkin agar lebih lebih tertata rapi dan SEO tentunya ikuti lah langkah-langkah berikut :

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

Untuk kode Css setiap template mungkin berbeda namun yang penting anda mengetahui dimana letak kode css untuk posting dan header.

Sumber Kode : http://kumpulantipsngeblog.wordpress.com/2012/01/25/tutorial-cara-membuat-dan-merubah-dynamic-heading-blogspot-h1-h2/

Rating: 4.5