Searching...
Home , , → Cara Membuat Dynamic Heading Pada Blog

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 Komentar Untuk "Cara Membuat Dynamic Heading Pada Blog"

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

Balas

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

Balas

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

Balas

iya sob, silahkan dipelajari :D

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Izin praktek ya, Bang..

Balas

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

Balas

ouhh gituu y? baatttuu tahu saya..

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

Balas

ya mau gimana lagi, kalau setengah gak bakalan jadi dong dynamic headingnya ;)

Balas

kalau ada waktu mau praktekin dhe, penasaran jadinya

Balas

iya sob, silahkan di coba ya :D

Balas

Butuh Pemahaman yang dalam di tutorial kali ini, ya bang

Balas

hanya tau fungsi setiap kode tag html aja mas :)

Balas

Mantap mas :) ozin praktek dulu di blog ane

Balas

iya mas, silahkan dicoba...

Balas

Mantap nih tutorialnya ficri

Balas

iya mbak makasih :D

Balas

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

Balas

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

Balas

makasi infonya, sangat bermanfaat

Balas

iya sama-sama sob...

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

tambahkan di bagian mana nih bos?

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Baru tau ini.. Ga taunya bisa divrubah juga

Balas

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

Balas

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

Balas

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

Balas

Wah...makasih share ilmunya

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Mantap sekali mas.. terima kasih banyak!!!

Balas

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>
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terimakasih atas komentar Anda di "Cara Membuat Dynamic Heading Pada Blog"