Skip to main content
Ivhaa Design

follow us

Cara Membuat Post Pegination Di Blogger

Cara Membuat Post Pegination Di Blogger

Baca juga:



Alhamdulillah pada kesempatan kali ini ivhaa masih bisa berbagi tutorial buat kalian semua nah pada tutorial kali ini saya akan membahas tentang Cara Membuat Pos Page Pagination Di Blogger mungkin post seperti ini di gunakan untuk blog di wordpress tapi untuk saat ini akan memberikan tutorial nya untuk blog dari Blogger.

Mungkin kalian pernah berkunjung ke situs besar pasti ada pos page nya bukan nah seperti itulah ntr itu demo nya

Kalian tertarik dengan tutorial ini yuk langsung simak aja artikel berikut ini


Cara Membuat Post Page Pagination Di Blogger 


1. Kalian login Blogger
2. Pilih > Template > Edit HTML
3. Kalian cek dulu kode berikut ini apakah ada atau belum di blog kalian jika memang sudah ada lebih baik jangan di masukan
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
4. Gunakan CSS berikut ini 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;
}

5. Kemudian taruh kode di bawah di atas 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>

6. Jika sudah tinggal kalian save template

Kita sudah memasang kode atau struktur pada post page pegination untuk penerapan di artikel kalian tinggal masukan kode berikut ini di post kailan

<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>

Nah itu tadi dia pembahasan untuk kali ini semoga bisa bermanfaat buat kalian semua mungkin dari saya jika ada kesalahan mohon di manfaatkan. Happy Blogger 

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar