Tối ưu hóa thẻ (H3) tiêu đề bài viết của Blogspot/blogger

Như các bạn thấy, mặc định của blogger, blogspot là tiêu đề của bài viết là thẻ H3, để mặc định tiêu đề bài viết tại trang chủ là H3 và tiêu đề bài viết là H1 vậy làm sao để chỉnh sửa nó cho phù hợp?

- Bước 1: Vào bảng điều khiến Blogger -> Mẫu (template) -> Chỉnh sửa HTML (Edit HTML):
- Bước 2: Tìm tới đoạn Code: Gõ Ctrl+F tìm (<b:if cond='data:post.title'>) thông thường trong template của bạn có 2 đoạn như vậy, tuy nhiên ta sửa đoạn code sau:
 <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>
Bạn để ý kỹ thì blogger mặc định H3 là tiêu đề bài viết, bạn có thể sửa H3 thành H1 trong đoạn code trên là tiêu đề của bạn có thể thay thế thành thẻ H1. Tuy vậy nếu bạn làm vậy, tiêu đề bài viết của bạn kể cả ở trang chủ lẫn trang bài viết đều là thẻ H1 sẽ không được, mà ta phải sửa cho tiêu đề bài viết của blogspot tại trang chủ là H3 còn tiêu đề của trang bài viết là H1, vì vậy:
Ta thay thế nó bằng code sau:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-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>
</h3>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>

</b:if>
Bước 3: Chỉnh sửa CSS cho tiêu đề:
Thông thường CSS của bạn có dạng:
.post h3....
.post h3 a, .post h3 a:visited..............

.post h3 a:hover.......................
Như vậy bạn phải chỉnh sửa lại như sau:
.post h1, .post h3 {…}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…}

.post h1 a:hover, .post h3 a:hover {…}

Lưu mẫu của bạn lại và xem kết quả:
Hy vong bài viết có ích cho bạn!