Mempersingkat Artikel blog ke halaman selanjutnya

Hallo sob, udah beberapa hari gua ga ngasih tutorial rasanya ada yang kurang banget, kali ini yang bakal gua bahas adalah gimana biar lu bisa membuat artikel dengan halaman 1,2,3... di halaman posting yang lu miliki . .
tujuan tutorial ini menurut gua adalah buat memperkecil ruang yang ada di blog lu agar vistor ga perlu susah-susah scroll ke bawah atau ke atas jadi tinggal klik jumlah halaman yang udah disiapkan di bawah artikelnya aja dan pastinya lebih terlihat responsive. . jadi lu tenang aja script atau kode dibawah ga bakal ngaruh buat speed loading atau blog lu gabakal jadi berat juga.
oke langsung aja ya sob,
langkah pertamanya adalah lu harus punya akun blogger .  ciee ciee haha ya pasti harus lah, kita aja lagi ngebahas tutorial blogger . .

• Demo

seperti biasa bagaimana cara lu buat artikel di blog lu. . tekan tombol entri baru yang ada icon pencilnya . . atau bisa juga Masuk ke menu Pos > Terus tekan Icon pencil yang ada samping kanan icon google.
Lalu klik html lihat gambar dibawah

Lalu paste kode dibawah ini di menu html tadi :

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
Artikel sobat
</div>
<div class="content_2" style="display: none;">
Artikel sobat
</div>
<div class="content_3" style="display: none;">
Artikel sobat
</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>

Pada kode diatas ganti tulisan berwarna kuning dengan artikel yang ingin kamu tulis .
selesaii . ciee cieee yang tampilan artikelnya udah kereeenn . silahkan tinggalkan pendapat atau pertanyaan dikomentar . .

SHARE THIS