Header ads

Cách tùy chỉnh mẫu newer và older post đẹp cho blogger

THủ thuật nhỏ nhưng hữu ích nhằm tăng tính điều hướng người đọc cho blog của các bạn. Đôi khi bạn không thích mẫu điều hướng Older/Newer post khá đơn điệu hoặc bạn bị mất luôn phần điều hướng này thì mẹo nhỏ sau đây cực kỳ hữu ích cho các bạn tùy chỉnh

Từ khóa:
-Tùy biến next- previous pposst đẹp kèm tiêu đề bài đăng
-Tùy chỉnh Older/Newer post
-Sử lỗi mục pagination không xuất hiện trên blog

Nói về lợi ích của mục điều hướng newer và loder post thì chắc các bạn cũng đã biết và có nhiều lợi ích như:
- Kéo chân độc giả lâu hơn nhờ có bài đăng cực hay kế tiếp hay trước đó
-Tạo thêm một dạng kiểu như backlink khá hay mà cực kỳ tự nhiên nữa


Ảnh minh họa và demo

mẫu newer và older post đẹp cho blogger
Điều hướng newer và loder post đã tùy chỉnh khá đẹp

Đemo; các bạn có thể xem tại blog này luôn nhé

Cách làm như sau:



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;}
Các bạn có thể chỉnh thêm các thông số cho phù hợp nhé:

font-size: 20px; color: #ccc;  là mẫu newer và older
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, có thể thay bằng font calibri

4- Bây giờ chúng ta sẽ thêm Jquery và một số font chữ mới


Các font được 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'/>
Các lưu ý thêm

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).

Ví dụ như blog này mình phải thay bằng .item-post h1.post-title mới được

 6- Ẩ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.

Ý Kiến- Bình Luận

0 Comments