How to create a shared page in the post

Tipswong - Media Inspiration

Create the bloggers there are tips on how to share the post page or pages. This function is quite good when used in blogger with the theme news, comics, or to read more. because this function does not take too long posts to bottom. for this you simply put it in your template.

DEMO

Copy the code below:

Place this code section CSS 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 0px;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}

Place this code section post HTML not Compose.

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

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

NOTICE : Code I've circled in red, the number of pages you want to share. so depending on how many pages you want to share. If you have completed or edit your content with in HTML, then do not come back to Compose, because the code <a class="movepg prever"> </a> and <a class="movepg prev next nexter"> </ a > will automatically become the default link blogger (could not continue the next to page ) due to the link. to overcome it, you return to HTML, delete the link in the <a class="movepg prever"> </a> and <a class="movepg prev next nexter"> </a> continue to publish again. ENDS.