Membuat Tag Heading Dinamis SEO Friendly Membuat Tag Heading Dinamis SEO Friendly | Berita Aneh Unik Dan Humor
Cara Terbaru

Anda mau tau? Disinilah Tempatnya!

Browse > Home > > > Membuat Tag Heading Dinamis SEO Friendly

Membuat Tag Heading Dinamis SEO Friendly

Cara Membuat Tag Heading Dinamis SEO Friendly - Hari ini saya akan berbagi ilmu tentang Membuat Tag Heading Dinamis SEO Friendly ok  langsung aja kita mulai


1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Edit HTML, centang Expand widget template.
Membuat Tag Heading Dinamis SEO Friendly3.       Jangan lupa backup dulu template anda sebelum melakukan perubahan.
4.       Cari kode seperti dibawah ini :
<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>

5.       Kemudian ganti dengan kode berikut ini :
<div id='header-inner'>
<div class='blogtitle'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>
<b:else/>
<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:if>
</div>
<b:include name='description'/>
</div>

6.       Selanjutnya cari lagi kode seperti dibawah ini :
<a expr:name=’data:post.id’/>
<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>

7.       Dan ganti dengan kode berikut ini :
<a expr:name='data:post.id'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' style='font-size:1.3em;'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>

8.       Save/Simpan template anda.

Menanggapi komentar beberapa sahabat yang meminta supaya diberikan tutorial tambahan untuk editing bagian CSS template, maka saya tanggapi dengan memberikan tutorial edit CSS seperti yang saya lakukan. Meskipun pada template yang saya gunakan sekarang tidak ada kendala dengan perubahan tag heading tanpa mengedit bagian CSS, namun saya sangat berterima kasih atas masukan sobat blogger, karena SEMESTINYA memang ada perubahan yang harus dilakukan terutama untuk bagian CSS post H1 dan H2.

Dibawah ini adalah kode CSS awal khusus pengaturan bagian .post :

.post {
  margin:.5em 0 0.5em;
  border-bottom:1px solid $bordercolor;
  padding-bottom:0.5em;
  }
.post h3 {
  margin:2px 0 0px 0;
  font-size:131%;
  font-weight:bold;
  line-height:1.3em;
  color:$titlecolor;
}

 .post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}

 .post h3 strong, .post h3 a:hover {
  color:$textcolor;text-decoration:underline;
}

 .post-body { font:normal 13px Arial;
  margin:8px 0 .75em;
  line-height:1.6em;
}

 .post-body blockquote {
  line-height:1.3em; 
}

 .post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:none;
  letter-spacing:.01em;
  font: $postfooterfont;
  line-height: 1.4em;
}

Perhatikan perubahan yang saya lakukan pada bagian CSS dibawah ini yaitu ada penambahan khusus untuk kode .post h1 dan .post h2. Sedangkan kode h3 pada template sudah saya rubah menjadi tag heading widget.

.post{
  border-bottom:1px solid #f2f2f2;
  padding-bottom:.5em;margin:.5em 0
  }

.post h1,.post h2{font:normal 12px Arial;
  font-weight:700;line-height:1.3em;
  color:#333;margin:2px 0 0
  }

.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:#333;font-weight:700
  }

.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{
  color:#222;text-decoration:underline
  }

.post-body{
  font:normal 12px Arial;
  line-height:1.6em;margin:8px 0 .75em
  }

.post-body blockquote{
  line-height:1.3em
  }

.post-footer{
  color:#444;text-transform:none;
  letter-spacing:.01em;font:normal 11px Arial, sans-serif;
  line-height:1.4em;margin:.75em 0
  }

Untuk mengubah tag heading h2 menjadi h3 (widget) silahkan sobat baca lagi di Cara Pengaturan Tag Heading yang sudah pernah saya posting sebelumnya. Semoga dengan Tips Membuat Tag Heading Dinamis SEO Friendly ini dapat membantu meningkatkan nilai skor SEO blog anda. Selamat mencoba..!!







Artikel Menarik Lainnya

Blog
Tips dan trik
Membuat Tag Heading Dinamis SEO Friendly
 Diulas oleh 798 Pembaca Tips Blogging And Computer 5 Senin, 19 November 2012

2 Responses to “Membuat Tag Heading Dinamis SEO Friendly”

ice breaks in your life :
wah terima kasih masukkannya.. langsung dipraktekkan tapi gak berhasil... :( 21 Februari 2013 pukul 11.38

lpsp :
makasih sob tutprialnya 11 Mei 2013 pukul 21.15

Posting Komentar

Langganan: Posting Komentar (Atom)