Pada kesempatan ini Saya akan menunjukkan sebuah tutorial Cara Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide. Di sini sobat hanya perlu menambahkan isyarat HTML di editor postingan yang nantinya akan muncul di blog sobat.
Artikel ini aku sanggup dari sobat kita Arlinadzgn.com. Saya hanya ingin menyebarkan untuk kalian maupun buat diri aku pribadi yang mungkin kelak membutuhkan nya.
Tutorial ini sangat cocok bagi sobat yang mempunyai goresan pena artikel atau kisah yang cukup panjang di blog kalian, sehingga akan menghemat ruang di halaman posting. Oke, eksklusif saja silakan ikuti langkah-langkah berikut ini yaa sob.
Membagi Konten Artikel Menjadi Beberapa Halaman
1. Login ke blogger > Buka Template > Salin isyarat di bawah ini sebelum ]]></b:skin> atau </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. Kemudian silakan kalian salin isyarat di bawah ini sebelum </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> Untuk menambahkan halaman, ganti maxIndex=4 dengan angka tertentu.
3. Simpan template kalian.
4. Langkah berikutnya, kalian buat postingan gres lalu salin isyarat di bawah ini di tab 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> 5. Lalu Publish artikel kalian dan lihat hasilnya. Untuk rujukan kalian sanggup liat di bawah ini.
Ok bagaimana sob,, gampang bukan...
Demikian lah tutorial Cara Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide agar artikel ini bermanfaat untuk sobat semua.
BACA SUMBER
