Lompat ke konten Lompat ke sidebar Lompat ke footer

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 😁😉
Hikam Fajri ®
Hikam Fajri ® Gue Hikam Fajri orangnye suka ngopi. Hehe... Jika ada pertanyaan, kritik, atau saran bisa langsung hubungin gue ke alamat Email [email protected]

Posting Komentar untuk "Cara Membuat Beberapa Halaman di Setiap Postingan Blog Tanpa mengubah Tema"

Berlangganan via Email

close
close
Getfile