Dividing Content Articles Become Multiple Pages (Slide Effect). For this tutorial I will share How to divide your article into several page without redirect to new tab. That's awesome tutorial should be applied on your Blog. You can easy in dividing long article into multiple page. The visitor can press next or previous button to continue reading your post. To apply this one, you can only add some code in "HTML" post editor. Before going to apply this tutorial, you can see the demo below, to make sure it is nice or not.Your post will be divided into several pages with slide effect. You will reduce more space in article post, because next and previous button will help visitor to continue reading.
1. Login Blogger
2. Click the " Template" → " Edit HTML "
3. Taking the code below and putting it before the ]]></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}
4. Then copy the code below above </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>
Important : maxIndex=4 can be changed with amount of content that you want to be divided.
5. Save your Template.
6. The next step, you just need to add the code below on your "HTML" post.
<div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<-- YOUR CONTENT HERE -->
</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>
Important : Your YOUR CONTENT HERE can be replace with your article.
7. Finally, you can publish your article.
That is article about Dividing Content Articles Become Multiple Pages (Slide Effect). If you like this tutorial, please share this article by clicking share button below.
Advertisement
EmoticonEmoticon