Monday, August 6, 2012

Cara Merubah Tag Heading h1 Pada Judul Posting

Cara merubah heading judul posting ke tag h1 - use h1 in blogspot post title adalah untuk merubah tag h1 di artikel post agar menjadi lebih seo friendly.

Struktur heading pada template blog meliputi heading h1, h2, h3, h4, h5, h6. Pada template, biasanya h1 digunakan untuk judul utama blog, h2 biasanya untuk widget, h3 biasanya untuk judul posting (post title), dan seterusnya. Menurut para pakar SEO, penempatan judul posting pada h1 bisa membuat blog menjadi lebih SEO friendly dengan alasan karena search engine lebih dekat dengan heading atau h1. Nah, kali ini saya akan menuliskan cara merubah heading judul posting ke tag h1 seperti berikut:

  • Login ke blogger.com > klik design > Edit HTML (centang Expand Widget Template)
  • Cari kode yang mirip dengan kode berikut pada template Anda:
    <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>
  • Hapus kode tersebut, kemudian ganti dengan kode berikut ini:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <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>
  • Selanjutnya cari lagi di template Anda kode berikut ini:
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>

    Hapus dan ganti dengan kode berikut:
    <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>
  • Cari lagi kode seperti ini:
    <h1 class='title'>
    <b:include name='title'/>
    </h1>

    Ganti dengan kode seperti ini:
    <b:if cond="data:blog.pageType != &quot;item&quot;">
    <h1 class="title">
    <b:include name="title">
    </b:include></h1>
    <b:else>
    <div class="title" style="font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;">
    <b:include name="title">
    </b:include></div>
    </b:else></b:if>
  • Kemudian cari lagi kode yang mirip seperti kode berikut:
    .post h3 {
    color:$titlecolor;
    font-size: 160%;
    font-weight: normal;
    line-height: 1.4em;
    margin: 0.25em 0 0;
    padding: 0 0 4px;
    }
    .post h3 a, .post h3 a:visited, .post h3 strong {
    color:$titlecolor;
    display: block;
    font-weight: bold;
    text-decoration: none;
    }
    .post h3 strong, .post h3 a:hover {
    color: #333333;
    }

    Ganti dengan kode berikut ini:
    .post h1, .post h3 {
    color:$titlecolor;
    font-size: 160%;
    font-weight: normal;
    line-height: 1.4em;
    margin: 0.25em 0 0;
    padding: 0 0 4px;
    }
    .post h1 a, .post h1 a:visited, .post h1 strong, .post h3 a, .post h3 a:visited, .post h3 strong {
    color:$titlecolor;
    display: block;
    font-weight: bold;
    text-decoration: none;
    }
    .post h1 strong, .post h1 a:hover,.post h3 strong, .post h3 a:hover {
    color: #333333;
    }
  • Save template, selesai.

0 comments:

Post a Comment