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
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/

Terima Kasih Kunjungannya
Info Menarik Lainnya:

Related Posts:

13 Responses to "Modifikasi Dynamic H1 H2 Untuk Title Post Blogspot"

  1. terima kasih Bang Ancis..
    meskipun artikel ini anda kutip dari master yang anda sebut kan, Namun anda telah membantu para blogger pemula seperti saya dalam meralat meta atau ccs, untuk modf ccs atau script pada Html tentu kita copas dari dari penedia ccs atau script tersebut, klu tidak mustahil rasa nya untuk mengetik ccs ato tutorial tersebut.
    sebelum nya saya udah coba copas ccs tentang H1 dan H2 ini di blog seseorang, setiap saya copy ke HTML saya terus membawa kata2 mengancam jika link sumber tidak di cantum kan ia akan buat blog yg copas artikel nya tidak di kunjungi pengunjung, jadi saya ambil sikap tidak mengunjungi blog itu lagi dan menandai blog yang munafik itu,
    maaf komenya agak panjang.
    Terima kasih buat Bang Ancis semoga selalu di ramai kan dan setia pengunjung nya

    ReplyDelete
  2. Wow! This is a very informative article. I was looking for these things and here I found it. I am doing a project and this information is very useful to me.

    ReplyDelete
  3. Makasih infonya Om, sangat bermanfaat buat kami.
    Salam

    ReplyDelete
  4. bingung pas nyari kode CSS nya mabro!
    kayaknya gak punya kali.....
    btw thank's 2U.keep in touching.
    maklum newbie :)

    ReplyDelete
  5. uda coba ditemplate bawaan tapi ada yang beda cssnya, mo coba lagi ditemplate yang baru om...

    ReplyDelete
  6. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me

    ReplyDelete
  7. The blog is absolutely fantastic. Lots of great information and inspiration, both of which we all need. Thanks.

    ReplyDelete
  8. Kalau strukture nya acak2an harus di perbaiki...?

    ReplyDelete
  9. wah bener nich carana gan,,,,,

    tapi masak harus ketik ulang kodenya

    ReplyDelete
  10. terima kasih gan ats infonya sangat membantu ane

    ReplyDelete

Don't Spam

Formulir Kontak

Name

Email *

Message *