Membagi Postingan Blog Jadi Beberapa Halaman (Tanpa JQuery)

Cara membagi postingan jadi beberapa halaman

Cara Membagi Postingan Blog - Membuat satu halaman posting menjadi beberapa halaman di Wordpress berbeda dengan cara membagi postingan Blogger.

Pasalnya, membuat page break di Wordpress itu bisa dijalankan otomatis dengan plugin. Sementara di blog, membagi postingan jadi beberapa halaman harus disetting manual sejak antum membuka kotak postingan bentuk HTML (bukan Compose).

Tahapan membagi postingan menjadi 2, 3, 4, atau bahkan 5 halaman di blogspot adalah:

1. Tulis postingan antum semuanya secara full jadi dan siap publish.
2. Sebelum membuka Blogger.com untuk memposting artikel tulisan antum itu, silakan copy kode berikut ini dan paste di Notepade.

<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">
    Tambahkan Konten Antum Disini
    </div>
    <div class="content_2" style="display: none;">
    Tambahkan Konten Antum Disini
    </div>
    <div class="content_3" style="display: none;">
    Tambahkan Konten Antum 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>

3. Selanjutnya, bagilah (break/spread) tulisan antum jadi 3 (atau sesuai kebutuhan). Caranya, gantilah "Tambahkan Konten Antum Disini" dengan teks artikel yang hendak dibagi hingga selesai semua bagian tulisan itu terbagi menjadi beberapa halaman. Ingat, kode di atas dibagi menjadi tiga yah. Jika membagi lebih dari tiga, atau hanya dua, tambah atau kurangi kode ini:

    <div class="content_1">
    Tambahkan Konten Halaman 1
    </div>
    <div class="content_2" style="display: none;">
    Tambahkan Konten Halaman 2
    </div>
    <div class="content_3" style="display: none;">
    Tambahkan Konten Halaman 3
    </div>
    <div class="content_4" style="display: none;">
    Tambahkan Konten Halaman 4
    </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>
    <a class="button_4" href="#">4</a>
    </div>

4. Setelah setting di Notepad selesai semua, paste semua konten tadi ke kotak postingan blog, dan Publish/Publikasikan. Selesai.

Lihat Contoh

Membagi Postingan Blog Jadi Beberapa Halaman

Kiaiblogger.com menyarankan untuk mensetting semua artikel menjadi beberapa halaman setelah antum post di blog. Dari postingan blog yang sudah terposting itu, copaslah semuanya dalam bentuk HTML, paste di Notepad baru kemudian diedit pakai kode di atas (dibagi-bagi menjadi beberapa halaman maksudnya).

Dengan begitu, foto postingan, link, audio atau video yang sudah disisipkan di postingan antum itu, akan lebih mudah menyisipkannya dan lebih mengirit waktu nyetting postingan. Iya, post-kan dulu secara full di blog, baru bagilah jadi beberapa halaman. Itu saran kiai. Santri manut atau tidak, ya wallahu a'lam.

Kelebihan kode di atas adalah lebih ringan daripada kode kode membagi postingan blog yang harus pakai setting template dengan menambahkan kode JQuery seperti pada postingan Kiaiblogger.com dengan judul: Cara Membuat Satu Halaman Posting Menjadi Beberapa Halaman di Blogger. [kiaiblogger.com]

Baca juga:

Advertisement

Rubrik:BloggingCodingPosting