KURAZONE ~ Pernahkah kalian menjumpai sebuah tombol "Post Page (Pagination)" saat kita membaca sebuah artikel pada salah satu blog/web? "Post Page (Pagination)" ini sering diletakkan pada bagian akhir artikel, seperti yang terdapat pada blog-blog berplatform Wordpress pada umumnya. Salah satu contohnya seperti yang terdapat pada gambar ini :
Post Page (Pagination) yang saya bahas disini bisa digunakan pada platform Blogger, kalau untuk WP bagaimana? Apakah bisa? Tentu saja bisa, namun jika menggunakan WP alangkah lebih baiknya menggunakan Plug-in yang sudah disediakan khusus untuk platform WP. Versi "Post Page (Pagination)" ini dikhususkan untuk para Blogger yang ingin menggunakan trik tersebut, hanya saja perbedaan Post Page (Pagination) ini tidak perlu pindah URL. Untuk demo nya bisa dilihat dibagian akhir pada artikel ini.
GUNAKAN JQUERY
Check terlebih dahulu apakah template anda sudah terpasang jQuery dibawah ini, jika belum silahkan dipasang.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
GUNAKAN CSS
CSS yang digunakan menggunakan berbagai macam class, letakkan CSS dibawah ini tepat diatas kode ]]></b:skin>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #007bfd;
font-weight: 900;
padding: 6px 36px;
color:#007bfd;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #007bfd;
color: #fff;
text-decoration: none;
}
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #007bfd;
font-weight: 900;
padding: 6px 36px;
color:#007bfd;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #007bfd;
color: #fff;
text-decoration: none;
}GUNAKAN JAVASCRIPT
Javascript dibawah ini bisa diletakkan diatas kode </head>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#007bfd');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#007bfd');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#007bfd');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#007bfd');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#007bfd');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#007bfd');
return false;
});
});
</script>SIMPAN TEMPLATE ANDA
Setelah memasang jQuery, CSS dan Javascript maka simpan template anda.
Dari sini anda sudah memiliki ke 3 komponen yang dibutuhkan untuk membuat Post Page (Pagination)
MEMBUAT ARTIKEL
Selanjutnya buatlah artikel dengan menanamkan kode dibawah ini dalam mode HTML (bukan mode Compose)
<div class="content_1"> Teks pada Halaman 1 letakkan disini </div> <div class="content_2" style="display: none;"> Teks pada Halaman 2 letakkan disini </div> <div class="content_3" style="display: none;"> Teks pada Halaman 3 letakkan disini </div> <div class="post-pagination"> <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a> <a class="button_3" href="#">3</a> </div>
PUBLIKASI ARTIKEL
Jika dirasa sudah selesai membangun Post Page Pagination, maka silahkan publikasi artikel anda.
Hasil akhir atau Demo pada tutorial Post Page Pagination bisa dilihat pada pesan-pesan singkat dibawah ini:
Ini adalah contoh halaman pertama, kamu bisa menaruh beberapa teks disini, bahkan kamu juga bisa menyertakan kode kode HTML didalamnya. Silahkan klik tombol nomor 2 untuk lanjut ke halaman 2
