Điều hướng bài đăng trang bài viết

Khác với phân trang trang index, phân trang trang bài viết (item) thường đơn giản hơn, chủ yếu dạng Bài đăng cũ hơn và Bài đăng mới hơn cùng 1 nút quay về trang chủ. Trong bài viết này tôi sẽ hướng dẫn bạn cách tùy biến nó sao cho đẹp và quý tộc

Theo ảnh trên các button sẽ được thiết kế theo phong cách Material Design, khi người dùng hover vào nút điều hướng, liên kết và tiêu đề sẽ được hiện ra, giúp bạn tiết kiệm được đáng kể không gian hiển thị. cùng với đó ta sẽ kết hợp với thẻ điều kiện để lấy ra url và xử lý 2 trường hợp đặc biệt đó là hiển thị button tại bài mới nhất và bài cũ nhất !

Trong bài này tôi sử dụng font awesome 5. Tự tích hợp jQuery nếu blog bạn chưa có

Code HTML (yêu cầu đặt trong vùng của tiện ích Blog1)

<div class='post-nav'>
    <b:if cond='data:olderPageUrl'>
        <a class='older-link-nav post-nav-btn' expr:href='data:olderPageUrl'><i class='fas fa-angle-left'></i></a>
    </b:if>
    <a class='home-nav post-nav-btn' href='/'><i class='fas fa-home'></i></a>
    <b:if cond='data:newerPageUrl'>
        <a class='newer-link-nav post-nav-btn' expr:href='data:newerPageUrl'><i class='fas fa-angle-right'></i></a>
    </b:if>
</div>

Code CSS

.post-nav{text-align:right}
.post-nav .post-nav-btn{position:relative;display:inline-block;background:#fff;color:#222;margin:0 5px;padding:14px 16px;font-size:1rem;border-radius:100%;box-shadow:0 2px 3px rgba(0,0,0,.06),0 2px 3px rgba(0,0,0,.1)}
.post-nav .newer-link-nav.post-nav-btn i{position:relative;top:1px;left:2px}
.post-nav .older-link-nav.post-nav-btn i{position:relative;top:1px;left:-2px}
.post-nav .newer-link-nav.post-nav-btn,.post-nav .older-link-nav.post-nav-btn{padding:14px 21px;font-size:1.2rem}
.post-nav .post-nav-btn:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,.15),0 6px 6px rgba(0,0,0,.12)} 

Code js (đặt trước </body>)

<script>//<![CDATA[
$(document).ready(function(g) {
    var h = g("a.newer-link-nav"),
        k = g("a.older-link-nav");
    g.get(h.attr("href"), function(k) {
        h.attr("title", g(k).find(".post h1.post-title").text())
    }, "html"), g.get(k.attr("href"), function(h) {
        k.attr("title", g(h).find(".post h1.post-title").text())
    }, "html")
});
//]]></script>

Do hệ thống thẻ điều hướng bài đăng trang bài viết của blogger chỉ cho phép lấy url của bài cũ hơn/bài mới hơn nên muốn lấy được tiêu đề bài viết ta phải sử dụng phương thức get html và tìm nội dung của thẻ h1 chứa tiêu đề bài đăng

Nói như vậy có nghĩa bạn tìm trong template của mình có tồn tại selector .post h1.post-title thì thôi, nếu không thì phải trỏ lại cho đúng để lấy được tiêu đề

Ok thủ thuật rất đơn giản, hi vọng không làm khó được bạn, chúc bạn thành công !