Thủ thuật này sẽ bổ xung thêm vào nút phân trang Older/Newer post (bài đăng cũ hơn, và bài đăng mới hơn) trong blog kèm theo tiêu đề bài viết. Cách thay thế thành tiêu đề bài viết co thể có nhiều blog đã viết nhưng có thể bạn sẽ thấy tiếc nếu không đọc bài viết này. Tại sao namkna nói vậy? Tại vì tiện ích này có điểm đặc biệt khác với những hướng dẫn của mọi người. Tiện ích này sẽ di chuyển phần Tiêu đề bài đăng cũ hơn và bài đăng mới hơn xuống ngay bên dưới bài đăng (thay vì sau comment như các hướng dẫn khác). Như vậy sẽ tăng được tính tò mò của độc giả về bài viết tiếp theo, Như vậy khả năng thu hút người đọc bấm vào để xem một trong 2 liên kết đó là rất lớn. Thêm nữa tiện ích này cũng hiển thị cả tiêu đề bài viết nên càng nếu thấy có ích người đọc sẽ bấm chuột vào đó để đọc nội dung bài viết (hơn là chỉ hiện nút bấm phải không các bạn?)

Ảnh minh họa:

Hiện Next & Previous kèm tiêu dề bài viết cho blogger

Xem demo trên blog khác:

 » VIEW DEMO

Bây giờ namkna sẽ hướng dẫn các bạn cách thực hiện thủ thuật này cho blog của bạn.

Lưu ý: Hướng dẫn này sẽ can thiệp lớn vào phần mẫu của bạn do vậy hãy tải mẫu của bạn về lưu lại dự phòng trước khi tiến hành theo bất cứ bước nào namkna hướng dẫn sau đây.

☼ Thêm Next & Previous kèm tiêu đề bài viết từ Jquery cho blogger

1- Đăng nhập vào Blog
2- Vào Mẫu => Chỉnh sửa HTML
3- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>.
/*################ Show Next & Previous Post Titles in Blogger with jQuery Navigation  ##########################*/
    .bogger-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
    .bogger-pager li.next { float: right; padding:0px; background:none; margin:0px;}
    .bogger-pager li.next a { padding-left: 24px; }

    .bogger-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
    }
    .bogger-pager li.previous a { padding-right: 24px;  }

    .bogger-pager li.next:hover, .bogger-pager li.previous:hover  {background:#333333; }

    .bogger-pager li { width: 50%; display: inline; float: left; text-align: center; }
    .bogger-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

    .bogger-pager li i { color: #ccc; font-size: 18px; }

    .bogger-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

    .bogger-pager li a span {font-size: 18px; color: #666;font-family:Arial, Tahoma, sans-serif; margin:0px}
    .bogger-pager li a:hover span,
    .bogger-pager li a:hover i { color: #ffffff; }
    .bogger-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
    .bogger-pager li.next i { float: right;
    margin-top: 15%;
    margin-right: 5%; }

    .bogger-pager li.next i, .bogger-pager li.previous i ,
    .bogger-pager li.next,  .bogger-pager li.previous{
    -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
    -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
    -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
    transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

    .fa-chevron-right {padding-right:0px;}
» Tùy biến CSS:
  • font-size: 18px là font chữ tiêu đề bài viết
  • color: #666 là màu chữ tiêu đề bài viết
  • font-family:Arial, Tahoma, sans-serif là loại font chữ của tiêu đề bài viết

4- Bây giờ chúng ta sẽ thêm Jquery và một số font chưc mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau thẻ <head>: 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
» Lưu ý:
  • Nếu blog bạn có file Jquery rồi thì hãy bỏ đoạn code màu xanh đi.
  • Đoạn font màu vàng chỉ dành cho blog chuyên viết tiếng anh. Nên nếu bạn viết blog bằng tiếng việt thì hãy xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn nha.

5- Chúng ta sẽ tìm vị trí cố định để thêm tiện ích này. Như đã nói ở trên chúng ta thêm nó vào ngay sau nội dung của bài đăng nên các bạn tìm đoạn code bên dưới: 
<data:post.body/>
- Dán vào sau nó đoạn code sau: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <ul class='bogger-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>Bạn đang xem bài đăng mới nhất trên blog này</span></a>
    </b:if>
    </li>

        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>Bạn đang xem bài đăng cũ nhất trên blog này</span></a>
    </b:if>
    </li>

        </ul>


    <script type='text/javascript'>
    //<![CDATA[
    (function($){   
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
        },"html");
    })(jQuery);
    //]]>
    </script>

          </b:if></b:if>
» Tùy biến XML:
  • Bạn có thể thay đổi phần màu đỏ theo ý của bạn.
  • Phần màu tím là thông báo khi bạn đang xem bài đăng mới nhất và bài đăng cũ nhất trên blog đó.
  • Trong mẫu mặc định tiêu đề là .post h3.post-title nên tôi sử dụng nó cho đoạn code Jquery trên. Ở đây mình dùng JQuery để lấy dữ liệu trong thẻ tiêu đề thông qua các lớp class và Id. Phần này có thể khác nhau đối với những blog khác nhau. Nếu bạn không tìm được thẻ đó thì có thể cần đến sự giúp đỡ của mình để xác định các lớp thẻ tiêu đề đó. Phần này rất quan trọng vì nếu làm không đúng bài viết sẽ không thể hiển thị được tiêu đề (Nếu cần thì hãy để URL blog của bạn ở bên dưới phần comment của bài này tôi sẽ chỉ nó cho bạn).

 6- Cuối cùng bạn cần ẩn đi các liên kết bài đăng cũ hơn và mới hơn mặc định của blogger. Để làm điều đó bạn làm như sau. Tìm đoạn code có dạng.
<b:includable id='nextprev'>
  <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>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Để ẩn nó thì ta phải sử dụng các thẻ điều kiện trong xml, cách thực hiện rất đơn giản bạn hãy làm theo 2 bước bên dưới nha:

6.1- Thêm vào sau đoạn màu vàng 2 đoạn mã bên dưới
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

6.2- Thêm vào trước đoạn màu xanh 2 đoạn mã bên dưới: 
</b:if></b:if>
7- Giờ lưu mẫu của bạn lại và vào trang kiểm tra thành quả nha.