Hiển thị tiêu đề bài mới và cũ hơn trong Blogger bằng jQuery

Như chúng ta đã biết, thông thường thì khi người dùng đọc một bài viết nào đó tại blog sử dụng Blogger, thì cuối trang có hiện một thanh điều hướng "Bài đăng Mới hơn", "Bài đăng Cũ hơn" và "Trang chủ". Trước đây mình có một bài viết giúp các bạn thay thế chúng bằng hình ảnh, và hôm nay bài viết này, mình sẽ hướng dẫn thay thế nó bằng tiêu đề của bài viết mà nó đang hướng tới.


Ngoài ảnh ở trên bạn có thể xem qua giao diện đã tùy biến lại tại template này của mình http://kslclassic.blogspot.com/2013/08/ornare-fusce-euismod-est-non-commodo.html nó nằm ở cột sidebar bên phải.

Hiển thị tiêu đề bài mới và cũ hơn trong Blogger bằng jQuery

Bài viết này mình sẽ hướng dẫn làm giao diện nguyên bản của tác giả MyBloggerTricks/ Để hoàn thành được việc hiển thị tiêu đề bài mới và cũ hơn cho Blogger, chúng ta có 2 việc cần phải làm là

• Thêm jQuery và thanh điều hướng mới vào Blogger
• Loại bỏ thanh điều hướng mặc định trong bài viết

Bắt tay vào việc thôi đối với những bạn không chuyên thì bạn nên backup lại template trước khi làm để tránh những điều không mong muốn, đăng nhập vào Blogger → vào Mẫu → Chỉnh sửa HTML tìm đến thẻ

]]></b:skin>

thêm đoạn css này lên trên

    /*################MBT Pager ##########################*/

    .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
    .mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
    .mbt-pager li.next a { padding-left: 24px; }

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

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

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

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

    .mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase;  margin-bottom:10px;}

    .mbt-pager li a span { font-size: 15px; color: #666;  margin:0px;}
    .mbt-pager li a:hover span,
    .mbt-pager li a:hover i { color: #ffffff; }
    .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
    .mbt-pager li.next i { float: right;
    margin-top: 15%;
    margin-right: 5%; }

    .mbt-pager li.next i, .mbt-pager li.previous i ,
    .mbt-pager li.next,  .mbt-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ại phần css này bạn có thể tự mình tùy biến lại giao diện của thanh điều hướng mà chúng ta sẽ thêm vào, nếu bạn cần hỗ trợ để tùy biến giao diện hãy liên hệ với mình.

Bây giờ chúng ta sẽ thêm nó vào Blogger, bạn tìm đến

<div class='post-footer'>

thêm nó vào ngay trước nó, tại đây thanh điều hướng này sẽ đặt tại ngay sau bài viết

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

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

    <ul class='mbt-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>Mới hơn</strong> <span>Bạn đang xem bài viết mới nhất</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>Cũ hơn</strong> <span>Bạn đăng xem bài viết cũ nhất</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ới đây là sắp hoàn tất rồi, bây giờ việc tiếp theo chúng ta sẽ làm là loại bỏ đi thanh điều hướng mặc định của Blogger tại bài viết.

Bạn tìm đến thẻ

<b:includable id='nextprev'>
 bạn sẽ thấy một đống đoạn mã có dạng như sau
<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'/>

điều bạn cần làm để nó không hiện ở trang bài viết rất đơn giản, chỉ cần bỏ tất cả đoạn mã trên vào cặp câu điều kiện của Blogger là xong

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 ĐOẠN MÃ TRÊN Ở ĐÂY
</b:if></b:if>

Lưu lại template và kiểm thử.

Lời kết

Đối với thanh điều hướng mặc định sẽ không đặt được hiệu quả cao việc người dùng chọn và xem chúng. Việc thêm thanh điều hướng có hiện tiêu đề bài viết sẽ có ảnh hướng tốt hơn đến việc người dùng xem các bài viết mới hơn và cũ hơn tại blog của chúng ta do họ biết được những bài viết đó có ý nghĩa gì. Mọi thắc mắc và ý kiến đóng góp các bạn có thể để lại ở phần nhân xét phía dưới, mình sẽ giải đáp cho các bạn.