Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot

Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot
Salam Blogger, Hari ini saya kembali melirik blog ini sekedar berbagi sedikit trik tentang blogspot dimana trik ini merupakan hasil dari jalan-jalan saya di beberapa blog master. Trik mengoptimalkan tag H1 title post dan header blog memang bukan hal yang baru, tetapi hal ini sangat mempengaruhi kedinamisan sebuah blog dalam menunjukan keyword yang utama dimata search engine.

Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot
Pada dasarnya template blogspot ada yang sudah seo friendly dalam tampilan serta tag tersebut namun tampilannya kurang keren dan gaul hal ini berlaku juga sebaliknya. Tampilan keren dan gaul tetapi friendly seo dari template itu sendiri dipertanyakan. Memang sangat susah dalam mengoptimalkan platform blogspot tetapi pasti ada jalan keluar untuk hal itu. Perlu anda ketahui cara optimalkan tag ini berbeda dari tutorial yang ada pada umumnya. Saya mencoba mengadopsi dari blogger master yang ada dan mencari tau code yang dinamis agar blogspot tetap friendly. Bagi anda yang sedang belajar seo blog off page maka anda saya sarankan untuk mencoba trik ini .

Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot
Tujuan Modifikasi trik tag H1 ini saya jabarkan seperti ini: jika blog anda pada posisi home page maka title blog atau judul blog memiliki atribut tag H1 dan posting memiliki atribut h2 sedangkan seidbar dan lainnya mengikuti. Jika anda masuk dalam sebuah artikel maka perubahan tag dimulai header anda menjadi no atribut tag H1 sebab secara otomatis tag H1 di pakai title posting. Dari modifikasi ini maka pastinya judul artikel anda menjadi lebih utama di bandingkan title blog anda, tetapi title blog anda tidak akan kehilangan eksistensi tag H1.

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.

catatan :
Sumber kode saya pelajari dari master coding http://deconstructioncode.blogspot.com/

Tapi untuk artikelnya, sebagian tidak mengalami perubahan sejak saya copas (untuk belajar) setahun yang lalu. Maaf, saya juga lupa blog mana yang saya copas karena sampai hari ini saya cek di mbah gugel tidak pernah kelihatan lagi blog itu. Satu yang pasti, tulisan ini berasal dari blog seorang Mastah Blogging Indonesia. Kalau tidak salah domainnya seoblogerinc.org tapi sudah expired. Salam Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot.

Info terbaru : artikel ini juga bisa anda dapatkan di :
http://belajarseopemula.blogdetik.com/mengoptimalkan-tag-h1-title-post-dan-header-blog/