14 Jun 2011

Merubah tag H1 di artikel post

Ahli seo mengatakan kalau search engine mengutamakan susunan header (h1, h2) dari blog kita.Jika anda ingin merubah judul post menjadi h1 tentunya akan ada dua h1 dalam template blog kamu, nah untuk mensiasatinya kita harus memastikan jika sedang berada di single post (artikel) judul post menjadi H1 dan judul blog menjadi p. title (tidak ada H) dan jika berada di homepage maka susunannya kembali semula (judul blog H1 dan judul post h2 atau h3).

Untuk membuat judul post blog kita menjadi H1 maka ikuti tahapan berikut ini:
  1. Saat klik -> rancangan dan pilih edit -> html lalu centang expand template
  2. Cari kode berikut di template blog kamu :
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    Jika sudah ketemu, ganti dengan dibawah ini:
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <a expr:href='data:blog.homepageUrl'>
    <b:include name='title'/></a>
    </h1>
  3. Cari kode berikut di template kamu
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    jika sudah ketemu, ganti dengan kode dibawah ini:
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <b:if cond='data:blog.pageType != "item"'>
    <H1 class='title'>
    <b:include name='title'/>
    </H1>
    <b:else/>
    <p class='title'>
    <b:include name='title'/>
    </p>
    </b:if>
    </div>
    <b:include name='description'/>
    </div>
  4. Kemudian cari kode berikut di template kamu:
    <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'>
    <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>
    Jika sudah ketemu, ganti dengan kode dibawah ini:
    <b:if cond='data:blog.pageType != "item"'>
    <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>
    <b:else/>
    <H1 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>
    </H1>
    </b:if>
  5. Jika anda memakai gambar/image untuk header blogspot kamu, maka tahapannya sudah selesai sampai disini. Tapi jika kamu tidak memakai gambar maka tulisan judul blog kamu akan berubah-ubah (besar kecil), jika dihomepage judul blog tetap normal (sesuai css) tapi jika di single post (permalink artikel) maka judul blog kamu menjadi kecil seperti huruf artikel. Hal ini karena kita belum menambahkan css untuk kode p.title (css alternatif judul blog ketika berada di artikel).

    Oleh sebab itu kita harus menambahkan kode css yang sama ukuran dan elemennya dengan kode title/header (judul blog kita)

    Contoh:
    #header h1{elemen/ukuran css title blog kamu}
    #header h1 a{Disini elemen/ukuran css title blog kamu}

    Maka tambahkan css seperti berikut ini:
    P.title {Nah Disini harus sama dengan elemen/ukuran css title blog kamu}
    P.title a{Nah Disini harus sama dengan elemen/ukuran css title blog kamu}

    Untuk makin jelasnya kita coba dengan css berikut ini:
    Jika css header kamu seperti ini:
    #header h1{font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
    #header h1 a{color:#fff;text-decoration:none}
    Maka tambahkan dibawahnya dengan kode css:
    P.title {font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
    P.title a{color:#fff;text-decoration:none}
  6. Setelah itu jangan lupa save template.

Catatan:

Ingat syarat bagi search engine dan browser membaca sebuah weblog adalah adanya unsur H1, H2 dan H3 (minimal itu saja cukup). Hati-hati karena ketika berada disingle post/artikel yang sudah menjadi H1 sedangkan jika di homepage artikel post (permalink post) kita H3, berarti kamu harus menyiapkan H3 tambahan, agar syarat H1, H2, dan H3 di blog kamu tetap ada baik itu ketika di homepage ataupun ketika di artikel postingan kita.

Dari berbagai sumber
Dapatkan Update Artikel RSS feed yang bermanfaat dari Saya, atau ikuti Saya di Twitter.
Email address:

8 komentar:

zacky mengatakan... at 15 Juni 2011 pukul 08.19

ok juga nih, buat ganti2 template yang udah bosen, thanks

Hans Ganteng mengatakan... at 19 Juni 2011 pukul 20.49

blogger sejati adalah blogger yg menyertakan sumbernya jika copas 100%, salam blogger sejati..

Idin Rohidin mengatakan... at 20 Juni 2011 pukul 09.10

@Hans maaf saya bukan blogger sejati, saya hanya penyampai informasi, jadi mohon maaf bila informasi yang saya dapatkan hasil kopas... ternyata bukan saya saja... :D

Idin Rohidin mengatakan... at 20 Juni 2011 pukul 09.11

@Zacky terimaksih telah berkunjung...

Aanbae mengatakan... at 18 Juli 2011 pukul 00.15

ok deh sob, sory atas comment ane coz saya juga masih newbie, salam kenal aja...:)

Idin Rohidin mengatakan... at 18 Juli 2011 pukul 14.37

oke sama-sama salam kenal juga...

LaNo HTC mengatakan... at 9 September 2011 pukul 14.38

mKSIh Sob.Infonya..

Idin Rohidin mengatakan... at 9 September 2011 pukul 15.32

@lano : Sama sama sob... :D

Posting Komentar