Cara Membuat Post Page (Pagination) pada Blog (Blogger) - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Post Page (Pagination) pada Blog (Blogger)

Pilihan Editor :

Cara Membuat Post Page (Pagination) pada Blog (Blogger)
Penulis Bagus Surochman
0
Modus malam




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

1 2 3

nanio
Cara Membuat Post Page (Pagination) pada Blog (Blogger)
Cara Membuat Post Page (Pagination) pada Blog (Blogger) Cara Membuat Post Page (Pagination) pada Blog (Blogger) Reviewed by Bagus Surochman on 6/09/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.