Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Hướng dẫn thêm phân trang đánh số thứ tự

                    Phân trang (Page Navigation) là một tiện ích được nhiều Blog áp dụng nhằm tăng tính chuyên nghiệp cho trang Blog của mình thay thế cho kiểu phân trang truyền thống của Blogspot. Dưới đây mình sẽ hướng dẫn các bạn cách phân trang cho Blogspot

                    Bước 1: Thêm link js tạo phân trang đánh số thứ tự

                    Đăng nhập Blog > Chủ đề > Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>

                    Copy
                    <b:if cond='data:view.isMultipleItems'>
                    <script>
                    //<![CDATA[
                    var perPage = 15;
                    var numPages = 3;
                    var firstText = '<span class="firstText"></span>';
                    var lastText = '<span class="lastText"></span>';
                    var prevText = '<span class="prevText"></span>';
                    var nextText = '<span class="nextText"></span>';
                    var urlactivepage = location.href;
                    var home_page = "/";
                    //]]>
                    </script>
                    <script src='https://cdn.rawgit.com/ns24h/js/master/blog-paper.js'/>
                    </b:if>

                    Thiết lập:

                    var perPage = 15; // Số bài đăng hiển thị trong một trang
                    var numPages = 3; // Số phân trang hiển thị

                    Bước 2. Thêm css trong <b:skin> tạo style cho phân trang

                    Copy
                    #blog-pager .displaypageNum a,#blog-pager .pagecurrent,#blog-pager .showpage a{color: #333;font: 14px Roboto,sans-serif;margin-right: 5px;padding: 8px 12px;background: #fff;border: 1px solid #ddd;border-radius: 2px;}
                    #blog-pager.displaypageNum a:hover,#blog-pager .showpage a:hover{color:#fff;background:#005791;border:1px solid #005791}
                    #blog-pager .pagecurrent{font-weight:bold;color:#fff;background:#005791;border:1px solid #005791}
                    #blog-pager .showpageOf{float:right;display:none!important}
                    #blog-pager span.firstText:after,#blog-pager span.lastText:after,#blog-pager span.prevText:after,#blog-pager span.nextText:after{font-family:fontawesome;font-size:18px;vertical-align:text-bottom}
                    #blog-pager span.firstText:after{content:'\f100'}
                    #blog-pager span.lastText:after{content:'\f101'}
                    #blog-pager span.prevText:after{content:'\f104'}
                    #blog-pager span.nextText:after{content:'\f105'}

                    Kiểm tra xem template đã có thư viện font-awesome chưa nếu chưa có chèn link bên dưới trong thẻ <head>

                    Copy
                    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

                    Lưu ý:

                    - Vào Cài đặt > Bài đăng nhận xét và chia sẻ > chọn Hiển thị tối đa bằng số bài đăng được thiết lập trong js ví dụ perPage = 15; thì cài đặt hiển thị tối đa 15 bài.

                    - Thêm ?&amp;max-results=số trang ví dụ ?&amp;max-results=15 đằng sau link Label ví dụ:

                    + Khi tạo menu có dạng

                    <li><a href="/search/label/mien-trung" title="Miền Trung">Miền Trung</a></li>

                    Sửa thành

                    <li><a href="/search/label/mien-trung?&amp;max-results=15" title="Miền Trung">Miền Trung</a></li>

                    + Với trường hợp link Label có dạng

                    <a expr:href='data:label.url' expr:title='data:label.name' ><data:label.name/></a>

                    Sửa thành

                    <a expr:href='data:label.url + &quot;?&amp;max-results=15&quot;' expr:title='data:label.name' ><data:label.name/></a>

                    Chấm hết bài!!!
                    Nội dung chính