Tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ trên Blogspot

  

Xin chia sẽ cùng các bạn cách để tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn và trang chủ ở cuối mỗi bài viết trên Blogger. Trong Blogspot thường mặc định phần này là dạng text, ở đây mình sẽ giúp các bạn tùy biến chúng thành hình ảnh hoặc có thể ẩn nó đi nếu bạn muốn.

Hình ảnh minh họa

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

A. Thay bài đăng cũ hơn, bài đăng mới hơn, trang chủ thành hình ảnh

a. Bạn tìm đến code bên dưới hoặc tương tự

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span></b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span></b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>

b. Thay code vừa tìm được thành code bên dưới

<div class='blog-pager' id='blog-pager'>

<!-- Phần "Bài đăng mới hơn" -->
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="Link ảnh bài đăng mới hơn"/></a>
</span></b:if>

<!-- Phần "Bài đăng cũ hơn" -->
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="Link ảnh bài đăng cũ hơn"/></a>
</span></b:if>

<!-- Phần "Trang chủ" -->
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="Link ảnh trang chủ"/></a>

</div>

Bạn thay các link màu đỏ đậm trong code thành link của các ảnh bài đăng mới hơn, bài đăng cũ hơ, trang chủ tương ứng. Bạn có thể sử dụng các chương trình đồ họa để tạo các ảnh đó, nếu không tạo được bạn có thể sử dụng các ảnh bên dưới tạm


B. Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào.

/* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-newer-link {
display:none;
float:left;
}
/* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
/* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}

5. Sau khi chọn 1 trong 2 tùy chọn trên và thực hiện xong bạn save template lại

Chúc bạn thành công