Tách bài viết trong blogger ra nhiều trang khác nhau ok

How to Split/Paginate Long Post into Multiple Pages on Blogger 2017

Tạo một bài đăng mới và mở cửa sổ thành phần HTML. Dán vào mã sau:
<span class="content1"> 
 ****Add your 1st page content here**** </span> 
 <span class="content2" style="display:none">
  ****Add your 2nd page content here**** </span>
  <span class="content3" style="display:none"> 
 ****Add your 3rd page content here**** </span
> <span class="content4" style="display:none"> 
 ****Add your 4th page content here**** </span> 
 <p><b>Pages: <span style="color: #3d85c6;"> 
 <a href="#" class="page1">1</a> 
 <a href="#" class="page2">2</a> 
<a href="#" class="page3">3</a> 
<a href="#" class="page4">4</a>
</span>
</b>
</p> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script> 
<script> jQuery(document).ready(function(){         
jQuery('.page1').click(function(){ 
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').show(); 
jQuery('.content2').hide(); 
jQuery('.content3').hide(); 
jQuery('.content4').hide(); return false; }); 
jQuery('.page2').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide(); 
jQuery('.content2').show(); 
jQuery('.content3').hide(); 
jQuery('.content4').hide(); return false; }); 
jQuery('.page3').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide(); 
jQuery('.content2').hide(); 
jQuery('.content3').show(); 
jQuery('.content4').hide(); return false; }); 
jQuery('.page4').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide(); 
jQuery('.content2').hide(); 
jQuery('.content3').hide(); 
jQuery('.content4').show(); return false; }); }); </script> 

 Step 4: Link Pages to Each Other (Optional)

The standard code I used above does NOT give you a way of getting from
page to page without clicking the page numbers on the bottom of each
post.  If you want to streamline the reading experience, you can add
"next" or "continue" links at the end of each page. (In this post I
included a description of the next step which links (unsurprisingly) to
the next step. Genius I know!)



To do this you need the following code:


<div style="text-align: right;">
<span class="content1"><a class="page2" href="#"><b>NEXT</b></a></span></div>

You can use whatever text you want in place of "NEXT" and you can align it to either side (or center it).



You also need to make sure this link is COMING FROM and GOING TO the
correct place.  So where this example says 'content1' that means it is
COMING FROM the first batch of content ("page 1") and where it says
"page2" that means it is is linking to the second batch ("page 2".)

So
 if you wanted to include a link on the second page, pointing towards
the third page, you would use "content2" and "page3" and so on.

No comments

Powered by Blogger.