Tag Heading yang biasa kita kenal dengan h1, h2, h3, h4, h5, dan h6 sangat berpengaruh sekali pada optimasi SEO, dalam hal ini mesin pencari lebih cenderung mengutamakan tag heading h1 dalam mengindek sebuah blog. Sementara pada template blogger, biasanya menggunakan tag heading h2 atau h3. Jadi alangkah baiknya bila kita ingin blog yang kita miliki lebih optimasi SEO, kita perlu untuk mengubah tag heading h2 atau h3 tersebut menjadi tag heading h1, terutama penggunaan tag heading pada judul artikel atau posting. Dan tips ini termasuk salah satu diantara tips SEO yang bagus menurut saya.

Nah bila anda berminat untuk optimasi SEO pada blog anda, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan 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'>
          <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>

Catatan:
Setiap template belum tentu sama, bisa menggunakan tag h3 atau tag h2

7. Silahkan ganti kode diatas dengan kode dibawah ini :

    <b:if cond='data:post.title'>
      <h1 class='post-title'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>
    </b:if>

8. Langkah selanjutnya cari lagi kode dibawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. Copy kode dibawah ini dan taruh sebelum kode ]]></b:skin> :

.post h1{ border-bottom:0 Dotted #000; margin:-4px 0 0 0; padding:0 0 4px; color:#1c3c6f; font:bold 150%/1.4em impact,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif } .post h1 a,.post h1 a:visited,.post h1 strong{ display:block; text-decoration:none; color:#333; font-weight:normal; font-family:impact,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;outline:none } .post h1 strong,.post h1 a:hover{ text-decoration:none; color:#333; outline:none }

Catatan :
Anda bisa mengatur style font atau tampilan tampilan judul artikel, dengan merubah nilai besar kecilnya font, warna font, ataupun jenis font, sesuai selera anda.

10. Simpan Template.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Membuat Menu Bar Dan Cara Settingnya

Pertama : Membuat Menu Bar

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

7. Selanjutnya cari kode <div id="content-wrapper">

8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>

</ul>

</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a>

<ul>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>

</ul></li>

</ul>

</div>

Keterangan:

• Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
• Ganti tulisan berwarna Biru (Ganti Menu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
• Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
• Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.

Ke Dua :  Cara Settingnya :

Di Menu Keterangan sebenarnya sudah cukup jelas. Seperti yang saya kasi warna Ungu. tapi alangkah baikknya saya menjelaskan secara lebih detail. dan Inilah jawaban dari pertanyaan Julian Silahkan di simak.

PERTAMA

Misalnya seperti Menu Downloader Atau Tutorial saya. Saat Sobat Klik Maka akan tampil 3 Postingan Pertama yang berkaitan dengan Download. Caranya Bagaimana ? Lihat Gambar Ini :

Nah Seperti Yang sobat lihat Saya menulis Tentang Tutorial membuat Membuat Menu Bar dan saya kasi Label Tutorial Blogger. Jika Sudah Klik Terbitkan Entri

KEDUA

Postingan Akan Terbit. Ok selanjutnya : 

Klik Rancangan 

Tambah Gadget

Label

 

 Klik Simpan ( Saya Ubah Tulisan Label dengan kategori )

Dan Hasilnya Akan Seperti Ini 

" Seperti yang Terlihat di tengah Blog saya bagian Kanan "

Klik Label yang sudah Sobat Buat tadi

Dalam Hal Ini Saya Mengklik Label Download

Maka Akan Muncul Tulisan-Tulisan saya yang saya kasi label Download 

 

" Salah Satu Contohnya "

Dan Sobat Copy URL Yang Berada Di Addres Bar

Ini Contoh URL dari Label Download Tadi http://albarnation.blogspot.com/search/label/Download

Lihat gambar

 

TERAKHIR

Silahkan Sobat Ganti URL  http://albarnation.blogspot.com/ Tadi

Contoh 

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://albarnation.blogspot.com/search/label/Download'>Download</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a>
<ul>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
</ul></li>
</ul>
</div>

 

Sekian-> Semoga Bermanfaat :D happy Blogging