Cara Membuat Beberapa Halaman di Setiap Postingan Blog Tanpa mengubah Tema

Gambar dari Google

Penyusun : Hikam Fajri - Keset Kusut

---

Ok, guys. Buat kali ini gue bakal membagikan Script untuk membuat beberapa halaman dalam satu postingan blog tanpa ribet mengatur template atau tema. Setelah gue berkelana alias searching Google kesono-sini sampe ubun-ubun beruap otak kusut, yaelah lebay, Gue dapetin cara yang handal dengan menggabungkan semua script tersebut.

Ok langsung aje copas Script dibawah ini, guys ;

1. Script maksimal 3 halaman

<div class="content_1">
Bagian pertama posting di sini!
</div>
<div class="content_2" style="display:none;">
Bagian kedua posting di sini! </div>
<div class="content_3" style="display:none;">
Bagian ketiga posting di sini!
</div>
<p style="font-weight:bold;">Pages:
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>
<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow'); return false;
});
});
</script>

Ingat pake mode HTML, guys.

2. Script maksimal 10 halaman

<div class="content_1"> Masukan artikel kamu 1 </div> <div class="content_2" style="display: none;"> Masukan artikel kamu 2 </div> <div class="content_3" style="display: none;"> Masukan artikel kamu 3 </div> <div class="content_4" style="display: none;"> Masukan artikel kamu 4 </div> <div class="content_5" style="display: none;"> Masukan artikel kamu 5 </div> <div class="content_6" style="display: none;"> Masukan artikel kamu 6 </div> <div class="content_7" style="display: none;"> Masukan artikel kamu 7 </div> <div class="content_8" style="display: none;"> Masukan artikel kamu 8 </div> <div class="content_9" style="display: none;"> Masukan artikel kamu 9 </div> <div class="content_10" style="display: none;"> Masukan artikel kamu 10 </div> <div style="font-weight:bold;">Pages: <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a> <a class="button_3" href="#">3</a> <a class="button_4" href="#">4</a> <a class="button_5" href="#">5</a> <a class="button_6" href="#">6</a> <a class="button_7" href="#">7</a> <a class="button_8" href="#">8</a> <a class="button_9" href="#">9</a> <a class="button_10" href="#">10</a> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script style="text/javascript"> jQuery(document).ready(function() { jQuery('.button_1').click(function(){ jQuery('.content_1').show('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); return false; }); jQuery('.button_2').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').show('slow'); jQuery('.content_3').hide('slow'); return false; }); jQuery('.button_3').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').show('slow'); }); jQuery('.button_4').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').show('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_5').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').show('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_6').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').show('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_7').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').show('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_8').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').show('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_9').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').show('slow'); jQuery('.content_10').hide('slow'); }); jQuery('.button_10').click(function(){ jQuery('.content_1').hide('slow'); jQuery('.content_2').hide('slow'); jQuery('.content_3').hide('slow'); jQuery('.content_4').hide('slow'); jQuery('.content_5').hide('slow'); jQuery('.content_6').hide('slow'); jQuery('.content_7').hide('slow'); jQuery('.content_8').hide('slow'); jQuery('.content_9').hide('slow'); jQuery('.content_10').show('slow'); return false; }); }); </script>

Buat yang ini sekali pindah mode dari html terus ke compose langsung gagal gan harus ulang dari awal.

Untuk link demo Klik Disini dan Disini

Ok mungkin itu aje guys dari gue semoga bermanfaat dan terimakasih udeh nyempetin mampir ke blog gue 😁😉

Share :