Anda ingin membuat tampilan postingan yang panjang terlihat lebih pendek, tentu anda harus membuat postingan tersebut menjadi dua atau beberapa halaman. Jika kita membuat dua postingan dengan judul yang sama tentu kurang menarik. Anda bisa mencoba membuatnya menjadi beberapa halaman namun tetap dalam satu postingan. Langsung saja simak Cara membuat postingan menjadi beberapa halaman berikut ini.
Pertama tambahkan kode berikut pada template blog diatas kode </body>
//add jQuery libraryPerhatikan script berwarna merah diatas, jika blog sudah memiliki script sejenis atau lebih tinggi, maka kode script itu tidak usah dipakai atau dihapus saja. Jika sudah dipastekan, save template. Script di atas akan menghasilkan maksimal 3 halaman. Jika anda ingin membuat halamannya lebih dari 3, silahkan bereksperimen dengan skrip di atas. Atau, jika tidak sempat untuk bereksperimen, tunggu hasil eksperimen saya.
<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');
return false;
});
});
</script>
Kedua : buat postingan terlebih dahulu, atau bisa juga dengan mengedit postingan yang sudah ada. Pada halaman postingan pilih Menu mode HTML kemudian bagilah postingan dengan menambahkan DIV atau SPAN dengan menambahkan atribut CLASS.
Pada blog saya cocok memakai DIV CLASS, berikut contoh nya :
<div class="content_1">Ketiga : Untuk menampilkan Button halaman nya, masih dalam mode HTML, tambahkan lagi kode berikut dibawah postingan tadi, berikut kode nya :
DISINI POSTING HALAMAN PERTAMA
</div>
<div class="content_2" style="display:none;">
DISINI POSTING HALAMAN KEDUA
</div>
<div class="content_3" style="display:none;">
DISINI POSTING HALAMAN KETIKA
</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>
Jika ingin menampilkan button dalam bentuk gambar, berikut kode nya ;
<p style="font-weight:bold;font-size:22px">Pages:Note: jika tidak suka dengan gambar urutannya, silahkan ganti kode URL yang berwarnah merah dengan URL gambar pilihan anda.
<a href="#" class="button_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge3SbStMajYuwFFp2vHTTNE52W2EZ5CG2t0V3jvGnNqfWYoevGucST0qHEOIBZSGkbtlQlygZ7eiFydpRWGoSrLN1I6abaxi1zuBll77wMHN5QMu8w7jpG5SHMKB9ITVJT4UREli6LY-Zf/s1600/1.png"/></a>
<a href="#" class="button_2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEjRjhlALlQsqUprUTTDwQVuouQNky4IENOQDRUD1sjXcx9a8Nv_kupQ-nZ-jfXtPM9etHdphp_3AzzBdSUJ4zga78W8S82-3XY72AyMZkWZhOfvSNGEfyYt9RWAn-xTzQIiYPtwJ-vnx/s1600/2.png" /></a>
<a href="#" class="button_3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixP3Mcn2y7s5NV8rf0uifXFydnMEzLiDO0NDDt_1pKw8OSs2Kwd2_Hic70ylAs4jVFaOW4cD75rQzBweT2HWnIEazKDcN9fERjjZqS9HeT9JiKsMMxuvXjLV0PcwG-pDDifP2CCdOXuBlV/s1600/3.png" /></a>
</p>
Source: Ragam Kehidupan
Belum ada tanggapan untuk "Membuat Postingan Menjadi Beberapa Halaman itu di Sini Caranya (Pagenation)"
Post a Comment