Cách phân trang bài viết cho Blogger

Đối với những bài viết quá dài thì việc kéo xuống chắc sẽ khiến một số người cảm thấy khó chịu. Vì vậy, Vinll xin chia sẻ một cách giúp tiết kiệm không gian trên trang bài đăng của bạn. Giúp bài đăng của bạn gọn gàng và đẹp mắt hơn bằng cách chia nội dung bài viết thành nhiều trang.

Cách chia nội dung bài viết thành nhiều trang cho Blogger

Bước 1: Đăng nhập vào Blogger chọn Chủ đề -> Chỉnh sửa HTML.

Bước 2: Như thường lệ bạn bấm tổ hợp phím Ctrl+F để tìm đến thẻ </b:skin>.

Bước 3: Copy đoạn code dưới đây và dán vào trước thẻ </b:skin> vừa tìm được.

CSS
/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

Bước 4: Tiếp tục tìm đến thẻ </body> và copy đoạn code dưới đây vào trước thẻ đó.

JS
<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

Lưu ý: Để thêm một trang nữa bạn có thể thay đổi maxIndex=4 bằng một số nhất định.

Bước 5: Bạn lưu lại và vào bài đăng chép đoạn mã bên dưới vào phần HTML trong bài viết.

HTML
<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- Nội dung bài viết -->
      </div>
      <div class="slidecontent">
        <-- Nội dung bài viết -->
      </div>
      <div class="slidecontent">
        <-- Nội dung bài viết -->
      </div>
      <div class="slidecontent">
        <-- Nội dung bài viết -->
      </div>
      <div class="slidecontent">
        <-- Nội dung bài viết -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

Demo

Hy vọng cách chia nội dung bài viết thành nhiều trang cho Blogger sẽ có ích cho bạn. Nếu bạn nào không làm được hoặc có thắc mắc gì thì xin để lại bình luận bên dưới. Vinll sẽ cố gắng trả lời các bạn sớm nhất có thể.