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 😁😉
Post a Comment for "Cara Membuat Beberapa Halaman di Setiap Postingan Blog Tanpa mengubah Tema"