Beranda > Seo, Tips Blogspot > Tutorial Cara Membuat dan Merubah Dynamic Heading Blogspot H1 H2

Tutorial 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, meski sedikit rumit tapi hasilnya sungguh lumyan bagi bagi blog saya yang memodifikasi seperti ini. Mudah mudahan anda paham dan sabar dalam memodifikasi selamat berjuang see you.

  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: