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
Post a Comment