How to Split the Content of Articles Into Multiple Pages with Slide Effects

How to Split the Content of Articles Into Multiple Pages with Slide Effects - On this occasion I will share a tutorial on how to Split the Content of Articles Into Multiple Pages with Slide Effects. Which one in this tutorial you just need to add the HTML code into the post editor that will appear on your blog.

By dividing some pages on the content of blog articles, this is perfect for those of you who have an article article long enough, so by applying this way, can save space on your post page. If you are interested to install it, can directly refer to some of his steps below.

Splitting Article Content into Multiple Pages

1. Login to blogger >> Open Template >> select Edit HTML

2. Copy the code below, then place it before the code ]]></b:skin> or </style>

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

3. Then copy the code below, and place it before the code </body>

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

4. Save the template

5. Next step, create a new post and then copy the code below in the HTML tab

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- YOUR CONTENT HERE -->
      </div>
      <div class="slidecontent">
        <-- YOUR CONTENT HEREI -->
      </div>
      <div class="slidecontent">
        <-- YOUR CONTENT HERE -->
      </div>
      <div class="slidecontent">
        <-- YOUR CONTENT HERE -->
      </div>
      <div class="slidecontent">
        <-- YOUR CONTENT HERE -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

6. Publish articles and see the results.


So the tutorial I've shared about How to Split the Content of Articles Into Multiple Pages with Slide Effects. Hopefully with a short enough article this can be useful for you and good luck.

Share :