Hiện next và Previous kèm tiêu đề bài viết cho blogger

Blogger cung cấp sẵn cho chúng ta một tiện ích đặt ở dưới khung viết bình luận, đó chính là các liên kết tự động đến bài viết trước và sau của bài viết hiện tại. Tiện ích này có một nhược điểm là xấu mà lại đặt ở cuối trang nên không thu hút lượng click vào. Hôm nay, mình giới thiệu với các bạn một cách hiện next và Previous kèm tiêu đề bài viết nằm ngay dưới bài viết và kết hợp một vài hiệu ứng bắt mắt.

#Ẩn tiện ích mặc định của Blogger

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML > Tìm thẻ <b:include name='nextprev'/>
3. > Thay thẻ vừa tìm được bằng đoạn dưới

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
</b:if></b:if>

#Thêm Scrip

1. > Tìm thẻ </head>

2. > Dán code dưới vào trên thẻ vừa tìm được

<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 của bạn đã có đoạn màu đỏ thì xóa nó đi.

#Thêm CSS

1. > Tìm thẻ ]]></b:skin>

2. > Dán code dưới vào trên thẻ vừa tìm được

/*################ 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;}

#Xác định vị trí chèn

1. > Tìm thẻ <div class='post-footer'> thứ 2(ở dưới)

2. > Dán code dưới vào dưới thẻ vừa tìm được

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

Lưu ý:

• Phần màu xanh thì bạn có thể thay đổi tùy ý
• Phần màu đỏ là tiêu đề blog của bạn - trong code là tiêu đề mặc định, cái này với mỗi blog là khác nhau. Nếu thẻ tiêu đề của bạn là h2 thì thay thành .post h2.post-title còn h1 thì là .post h1.post-title

Nguồn MBT