Sharing Article Content into Multiple Pages with Slide Effects

The next tutorial Arlina Design will provide a tutorial on Sharing Article Content into Multiple Pages with Slide Effects. Here, you only need to add HTML code in the post editor that will appear on your blog.



This tutorial is perfect for friends who have long enough article writing on their blog, so it will save space on the posting page. Okay, just go ahead and follow the steps below.

Sharing Article Content into Multiple Pages

1. Login to blogger> Open Template> Copy the code below before ]]></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}

2. Then copy the code below before </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>

To add a page, replace maxIndex = 4 with a certain number.

3. Save the template.

4. The next step, create a new post then copy the code below in the HTML tab

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

5. Publish the article and see the results.

• Results

Tags Blogging CSS HTML jQuery