Cara Membuat Dynamic Heading Pada Blog

Cara Membuat Dynamic Heading Pada Blog
Cara Membuat Dynamic Heading Pada Blog - Dynamic heading pada blog umumnya telah digunakan pada template yang berasal dari Blogger, namun masih ada sedikit kelemahan pada template tersebut, misalnya judul blog pada halaman posting masih berada pada posisi h1 padahal lebih bagusnya judul artikel ketika berada pada halaman posting yang berada pada posisi h1. Dynamic heading pada blog ini umumnya digunakan pada tag heading h1 h2 h3 dan terkadang menggunakan h4, tidak hanya itu saja dengan berkembangnya teknologi kini telah hadir sebuah heading tag yang baru yaitu tag h5 dan h6, dan hingga saat ini heading tag h1 h2 h3 h4 h5 h6 sangatlah berperan penting dalam blogspot, karena dengan mengatur tag heading h1 h2 h3 h4 h5 h6 akan membuat blog lebih SEO Friendly lagi.

Apa Fungsi Tag Heading H1 H2 H3 H4 H5 H6 ?

Fungsi tiap-tiap tag heading sangat berbeda-beda, tidak semuanya tag heading ini akan digunakan pada posisi yang sama misalnya, pada judul blog dan judul artikel kedua ini tentu harus menggunakan tag heading yang berbeda. Untuk lebih jelasnya silahkan baca pada artikel sebelumnya Apa Fungsi Tag Heading H1 H2 H3 H4 H5 H6.

Bagaimana Cara Membuat Dynamic Heading Pada Blog ?

Setelah paham dengan masing-masing fungsi dari tag heading pada blog, kini saatnya kita menerapkan atau mempraktekannya pada blog kita untuk mengatur tag heading h1 h2 h3 h4 h5 h6 agar lebih seo friendly. Untuk membuat dynamic heading pada blog caranya sangat mudah, tetapi Anda harus perhatikan dengan detail kode HTML yang saya berikan apakah sama atau ada perbedaan, jadi perlu hati-hati saat mengganti beberapa kode html agar tidak terjadi error saat membuat dynamic heading pada blogspot. Langsung saja simak dibawah ini cara mengatur tag heading h1 h2 h3 h4 h5 h6 atau cara membuat dynamic heading pada blog :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode seperti ini :
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
Ganti dengan kode dibawah ini :
<div id='header-inner'>
<div class='titlewrapper'>
<b:include name='title'/>
</div>
<b:include name='description'/>
</div>
4. Cari kode seperti ini :
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
 Ganti dengan kode dibawah ini :
<b:includable id='title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
</b:includable>
5. Cari kode seperti ini :
<b:includable id='post' var='post'>
Lihat kebawah maka akan ada beberapa kode seperti dibawah ini :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ganti kode diatas dengan kode dibawah ini :
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h2 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
6. Klik Simpan

Pembuatan dynamic heading pada blog sudah selesai, untuk mengatur tag heading h1 h2 h3 h4 h5 h6 silahkan cari kode seperti <h1> <h2> <h3> <h4> <h5> <h6> dan diubah dengan masing-masing kode tag heading yang Anda inginkan, saya sarankan agar membaca terlebih dahulu fungsi dari tag heading pada blog, agar tidak salah ketika akan memberi tag heading.

Sekian artikel mengenai Cara Membuat Dynamic Heading Pada Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
Follow my blog with Bloglovin

51 Responses to "Cara Membuat Dynamic Heading Pada Blog"

  1. Ini sama saja dengan penggantian header menjadi sama dengan judul ya? betul salah nnih kang :)

    ReplyDelete
    Replies
    1. iya betul sekali (y)
      ini fungsinya untuk mengganti judul blog menjadi judul artikel pada bagian halaman posting :)

      Delete
  2. wah... boleh juga nih caranya, ijin kopi kode, mempelajari dan mempraktekannya yia bos...

    ReplyDelete
  3. saya kalau melihat kode seperti itu suka pusing mas :p
    tapi kalau tinggal copy paste saja sih bisa :D

    ReplyDelete
    Replies
    1. hehe, iya emang tinggal copy paste doang, cuman perlu hati-hati mas, kalau salah kan bingung :D

      Delete
  4. izin mempelajari dulu mas, jarang perhatian h1...dst

    ReplyDelete
    Replies
    1. silahkan mas, dipelajari dulu...
      h1 kan umumnya judul blog atau judul posting :D

      Delete
  5. wawww skripnya banyak amaetttt jadi puyeng :v tapi kerenn nih infonya gan sangat bermanfaat

    ReplyDelete
    Replies
    1. ya mau gimana lagi, kalau setengah gak bakalan jadi dong dynamic headingnya ;)

      Delete
  6. ouhh gituu y? baatttuu tahu saya..

    =======================
    http://kudhen.blogspot.com
    =======================

    ReplyDelete
  7. kalau ada waktu mau praktekin dhe, penasaran jadinya

    ReplyDelete
  8. Butuh Pemahaman yang dalam di tutorial kali ini, ya bang

    ReplyDelete
    Replies
    1. hanya tau fungsi setiap kode tag html aja mas :)

      Delete
  9. Mantap mas :) ozin praktek dulu di blog ane

    ReplyDelete
  10. Oh ternyata cara membuat dynamic heading pada blog cukup sulit juga ya mas :D.
    makasih mas tutorialnya.

    ReplyDelete
    Replies
    1. mudah mas, tinggal paste saja kode diatas,
      hanya perlu pemahaman kode html supaya tidak salah :)

      Delete
  11. makasi infonya, sangat bermanfaat

    ReplyDelete
  12. bang uda di copy semua tapi kok ga ada beda apa2 ya?

    ReplyDelete
    Replies
    1. hati-hati penempatannya,
      itu emang cuman menggangti beberapa kode heading, misal dari tag h1 menjadi h2, jadi kelihatannya gak ada perubahan tapi fungsinya berbeda

      Delete
  13. baik bos sudah bisa nih, terima kasih bos berguna banget nih. kunjungi website ane ya bos :D

    ReplyDelete
  14. bos kok di homepage nya yang judul postingan jadi kecil ya bos tulisannya? tapi begitu d klik masuk postingan nya jadi besar bos

    ReplyDelete
    Replies
    1. iya karena ada perubahan pada tag titlenya,
      coba tambahkan kode css ini
      h1,h2,h3,h4,h5,h6{font-weight:bold}
      h1{font-size:200%}
      h2{font-size:180%}
      h3{font-size:160%}
      h4{font-size:140%}
      h5{font-size:120%}
      h6{font-size:100%}

      kalau masih kecil coba deh diatur lagi font size nya...

      Delete
  15. Replies
    1. waduh belum paham bener ya...
      simpan di atas kode ini
      ]]</b:skin>

      Delete
    2. maaf gan saya juga mengalami hal yang sama judul blog jadi kecil,padahal sudah di pasang kode CSS,trus ukurannya sudah di ganti,tetapi tetep kecil,bagaimana y

      Delete
    3. h1,h2,h3,h4,h5,h6{font-weight:bold}
      h1{font-size:200%}
      h2{font-size:180%}
      h3{font-size:160%}
      h4{font-size:140%}
      h5{font-size:120%}
      h6{font-size:100%}


      tambahkan kode itu dan coba atur kembali, silahkan dicoba pakai satuan pixel

      Delete
  16. Bermanfaat sekali ini mas bro.. ijin bookmark.. :)

    ReplyDelete
  17. ijin nyimak ya bro.. artkelnya manis ya. hehehe..

    ReplyDelete
  18. wahh ni yang saya cari nih, hhehe mas kok tapi di template saya beda yah ?
    kode html harus dicari gak ada beda kayaknya
    solusinya gmana mas ? mohon bimbinganya

    ReplyDelete
  19. Baru tau ini.. Ga taunya bisa divrubah juga

    ReplyDelete
  20. Gan thank mohon copy paste G̲̮̲̅͡åк̲̮̲̅͡ pakek susu

    ReplyDelete
  21. gan,, gmna caranya biar support kek gnian

    1. Untuk Menyisipkan Kode Panjang Gunakan Kode Disini
    2. Untuk Menyisipkan Kode Pendek Gunakan Kode Disini
    3. Untuk Menyisipkan Quote Gunakan Catatan Anda
    4. Untuk Menyisipkan Gambar Gunakan URL Gambar
    5. Untuk Menyisipkan Video Gunakan URL Video Youtube


    ane juga pke template agan nie

    ReplyDelete
    Replies
    1. ini sob,
      http://www.ficripebriyana.com/2015/04/membuat-pesan-formulir-komentar.html

      Delete
  22. gan boleh nanya,,,,, klu halaman postingan kita ga muncul,, obatnya apa y...... mksh gan

    ReplyDelete
    Replies
    1. gak muncul di google ?
      silahkan pelajari ini teknik ini
      http://www.ficripebriyana.com/2014/04/hal-yang-harus-dilakukan-setelah-posting.html

      Delete
  23. wah makasih gan artikelnya bermanfaat sekali,saya sudah berhasil mencobanya,,,,,terimakasih banyak

    ReplyDelete
  24. Mantap sekali mas.. terima kasih banyak!!!

    ReplyDelete

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting