Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger

Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger - Cukup mudah karena sobat tinggal menambahkan kode HTML saja sebagi pemanggil di editor pos blog yang nantinya akan muncul sendiri di tampilan blog.

Tips ini sangat bagus untuk sobat yang suka menulis artiekl long (panjang) karena akan memperluas ruang posting sobat. Caranya simak di bawah ini :

Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger

Masuk ke blogger > Template > Edit HTML > Salin code di bawah niki sebelum ]]></b:skin> utawi</style> 

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

Lanjut kopas kode di bawah ini sebelum </body>

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

Ganti kode yang saya tandai "4" dengan angka yang sobat inginkan untuk menambahkan halaman.

Save template, Langkah selanjutnya buat postingan artikel baru lalu kopas kode di bawah ini taruh di menu tab HTML.

HTML<div class="next-wrap">

  <div id="photocons" class="instruction">

    <div class="slidecontentWrap">

      <div class="slidecontent">

        <-- ISI KONTEN DI SINI -->

      </div>

      <div class="slidecontent">

        <-- ISI KONTEN DI SINI -->

      </div>

      <div class="slidecontent">

        <-- ISI KONTEN DI SINI -->

      </div>

      <div class="slidecontent">

        <-- ISI KONTEN DI SINI -->

      </div>

      <div class="slidecontent">

        <-- ISI KONTEN DI SINI -->

      </div>

      </div>

      </div>

      <a class="movepg prever">prev</a>

      <a class="movepg nexter">next</a>

</div>

• Demo

Publikasikan artikel dan cek hasilnya.


Demikian cara Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger, Semoga bermanfaat.