Menyusun Tag Heading H1 H2 H3 Blogspot Terlengkap dan Jelas

---

Belajar Berbagi- Selamat datang di blog ini. saya tidak akan memposting tulisan bagaimana cara menyusun H1 H2 H3 sebelum saya uji coba terlebih dahulu. dan hasilnya untuk blog ini, berhasil dengan baik, tapi belum tentu juga sempurna. lalu bagaimana dengan blog anda? memang sudah banyak tentang tutorial seperti yang saya maksud tersebut, akan tetapi mungkin saja anda merasa kurang puas karena tidak lengkap dan jelas atau diambil inti-intinya saja, untuk dari itu blog belajar berbagi mencoba memberikan tutorial merubah h1 h2 h3 dengan lengkap dan jelas agar anda merasa puas. berikut gambaran defaul blog belajar berbagi sebelum disulap.

Keterangan:
Secara defaul blogger menyediakan H1 sebagai judul blog anda, H2 sebagai judul widget anda, dan H3 sebagai postingan anda. menurut pakar seo, hal tersebut masih kurang menggigit di kancah search engine sekaliber google. tapi perlu anda ingat, jangan langsung mempercayai hal tersebut dan menerapkannya di blog anda, sebelum anda yakin ingin menyulap susunan tersebut menjadi H1 judul blog, H1 judul postingan, H2 isi postingan, H3 widget.

Susunan defaul H1 H2 H3 Bawaan Blogger
H1 judul blog anda pada halaman Home;
H1 judul blog anda lagi yang muncul ketika anda mengklik salah satu judul postingan;
H2 widget; dan
H3 judul postingan dan isi postingan anda.

Susunan H1 H2 H3 setelah dirubah atau disulap
H1 judul blog ketika anda mengklik halaman Home;
H1 ketika mengklik judul postingan;
H2 isi dari postingan/judul postingan; dan
H3 widget blog anda

Salah satu untuk membuktikannya, silahkan terbang ke halaman Home blog anda, lalu test pada halaman Home blog anda tersebut "klik kanan, lihat kode sumber laman "untuk mozilla", atau di broser google chrome inspect element" lalu cari dengan menekan  tombol f3/ctrl+f dan ketikan <h1 atau </h1> dan lihat yang muncul adalah nama blog/judul blog anda. dan untuk membuktikan kembali apakah judul blog anda akan tetap H1 jika anda mengklik salah satu postingan? silahkan buktikan kembali dengan cara diatas tersebut.

Ilustrasi Gambar

Sudah cukup jelas? sebenarnya masih ada cara lain untuk mengetahui apakah blog kita sudah seperti hal diatas. akan tetapi disini saya berikan cara termudahnya untuk memonitor sebuah blog, apakah penempatan H1 H2 H3 sudah mengikuti standar dari pakar seo.

Apakah template bawaan blogger salah?
Tidak ada yang salah dalam hal ini, karena itulah defauld blogger. setidaknya kita harus belajar berbagi pengetahuan dan mengembangkan ilmu kita untuk menggunakan nalar dan logika bagaimana blog tersebut sudah baik, tapi dibuat semakin baik lagi di pertarungan kancar search engine google. apakah anda sudah cukup mengerti? jika sudah, mari kita terbang ke paragraf berikutnya.

Sebelum melakukan pengeditan, biasakan anda download template anda terlebih dahulu.
Untuk melakukan pencarian kode, sebaiknya gunakan ctrl+f di kota html tersebut

Pertama cari kode <b:if cond='data:post.title'> sampai dengan </b:if> "HAPUS"
Login ke blog >> template >> HTML >> cari kode <b:if cond='data:post.title'>. kurang lebih contohnya seperti berikut 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Jika anda sudah menemukan kode tersebut, silahkan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<b:else/>
<h1 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>
</h1>
</b:if>

Kedua cari kembali kode seperti dibawah ini
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Jika sudah bertemu dengan kode tersebut, hapus dan ganti dengan kode berikut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Ketiga cari kembali kode
<h1 class='title'>
<b:include name='title'/>
</h1>
Silahkan anda ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>

Cara diatas sebenarnya sudah selesai, akan tetapi banyak sekali keluhan dari blogger pemula seperti saya. seperti, tampilan widget berubah dan posting berubah. nah untuk dari itu bagaimana kita mencari kode CSS tersebut dan menyulapnya agar rapih kembali.

Selanjutnya pengaturan CSS pada template blogger
Cari kode seperti dibawah ini pada css template anda
.post h3 {
color:#ff6600;
font-size:14px;
font-weight:normal;
text-align:left;
line-height:1.4em;
padding:0 0 20px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color:#ff6600;
display:block;
font-weight:bold;
text-decoration:none;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
}
Jika sudah ketemu kode seperti diatas atau sama persis dengan kode tersebut. maka ganti dengan kode dibawah ini

.post h1, .post h2 {
color:$titlecolor;
font-size: 17px;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 25px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:#ff6600;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color:#000000;
}

Selesai sudah anda merubah susunan h1 h2 h3 pada template blogspot milik anda. dan keluhan-keluhan yag masih saja sering ditemui adalah sebagai berikut:

Pada Umumnya ukuranlah yang sering menjadi masalah
Semua tidak lepas dari css. akan tetapi perlu anda ingat jangan anda rubah apapun kecuali penyesuaian di .post tersebut dan sekitarnya (dari dibawah kode body { sampai dengan kode diatas ]]></b:skin>) silahkan anda atur dan sesuainya. tetapi ingat setelah satu saja yang anda atur, maka save template dan selalu lihat perubahan-perubahannya. memang disini perlu teliti dan menggunakan logika.

Bagaimana menurut anda, apakah blog anda sudah anda sulap seperti blog belajar berbagi? berikan pendapat anda dengan baik. terima kasih

Anda Berada di Label Seo Konyol