Các template miễn phí của Blogspot đều được design tiêu đề bài viết ở thẻ H3 và tiêu đề blog ở thẻ H1. Để đảm bảo mỗi trang trong Blog của bạn chỉ có 1 thẻ H1, H2 riêng, các bạn cần thực hiện các bước sau:
Chú ý:
- Các bạn copy code HTML template của Blog về máy để phòng trường hợp lỗi trong quá trình thực hiện.
- Download Notepad++ về cài đặt để khi cần xem code HTML trực tiếp trên máy tính sẽ dễ dàng hơn.
- Đăng nhập vào trang quản trị Blog --> Mẫu --> Chỉnh sửa HTML. Click vào dòng bất kỳ của màn hình code HTML xuất hiện và nhấn Ctl+F để tìm đến dòng code: <b:if cond='data:post.title'>
- Thay thế toàn bộ đoạn code sau:
<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:blog.pageType != "item"'>
<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>
- Thành đoạn code HTML:
<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 2: Chỉnh sửa CSS cho thẻ <h1> tiêu đề bài viết
CSS là kết quả thể hiện interface như màu chữ, cỡ chữ, font chữ...
- Tìm các đoạn code sau
.post h3 {…}
.post h3 a, .post h3 a:visited {…}
.post h3 a:hover {…}
.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 {…}
Bước 3: Chuyển tiêu đề blog từ H1 sang H2 hoặc H3
Sau khi thực hiện xong 2 bước trên, blog của bạn sẽ bị 2 thẻ H1 cho một trang. Vì vậy cần thực hiện các bước sau để chỉnh tiêu đề blog từ thẻ H1 như mặc định về thẻ H2 hoặc H3.
- Bạn tìm các đoạn code sau: sửa chữ H1 thành H2
<h1 class='title'
- Bạn tìm các đoạn CSS có dạng như sau và chữ H1 thành H2
#header h1 {...}
#header h1 a, #header h1 a:visited {...}
Lưu ý:
- Mỗi template blogspot sẽ có code khác nhau nhưng các đoạn chỉnh sửa trên là gần như nhau.
- Sau mỗi bước chỉnh sửa phải tiến hành Lưu mẫu và xem kết quả thể hiện bên ngoài
- Quá đơn giản phải không nào! Các bạn đã hoàn thành các việc tối ưu cho tiêu đề bài viết trang blogspot của mình.
Chúc các bạn thành công!
0 nhận xét: