Cara Membuat Pagination Page di Blogspot

Advertisement

Setelah browsing "sana-sini" mencari cara untuk membuat Pagination Page atau untuk membuat beberapa halaman dalam satu postingan berplatform blogspot. Ternyata banyak bertebaran di Internet tentang cara-cara membuat Pagination Page tersebut, namun dari sekian banyak cara tersebut hanya ada beberapa yang bisa diaplikasikan / diterapkan ke dalam blog kita. Ada yang harus mengedit template HTML dan ada pula yang langsung dengan menginput di postingan blognya.

Pada kesempatan ini saya akan membagi ulang tips cara membuat pagination page seperti yang sudah diulas oleh blognya mbah kakung.com. Langsung saja kita mulai mengaplikasikan cara tersebut, yaitu :
1. Siapkan artikel yang akan diposting yang agak panjang.
2. Masuk ke dashboard blog kita ==> Entri baru ==> klik yang HTML

3. Copy kode script di bawah ini ke dalam HTML tersebut:

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

    </div>
<div class="content_2" style="display: none;">

    Artikel halaman dua

    </div>
<div class="content_3" style="display: none;">

    Artikel halaman tiga

    </div>
<div align="center">
Halaman selanjutnya..</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>

Atau bisa juga dengan cara mengcopy / klik tombol di bawah ini :

<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 halaman satu </div> <div class="content_2" style="display: none;"> Artikel halaman dua </div> <div class="content_3" style="display: none;"> Artikel halaman tiga </div> <div align="center"> Halaman selanjutnya..</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>

4. Selanjutnya copy artikel yang sudah dipersiapkan (no.1 di atas), sesuai dengan yang kita inginkan untuk kita taruh di halaman 1 (Artikel halaman satu),dst.

5. Preview, kalau sudah ok silahkan di SAVE.

<===...==>

1 2

Tweet

Subscribe to receive free email updates: