Cara Membagi Satu Posting Menjadi Beberapa Halaman Pada Blogspot

---

Hallo sahabat Blogger, Piye kabare...? Beberapa waktu yang lalu saya pengen memasang widget seperti ini di Blog saya, tapi cari caranya susahnya minta ampyuun. Saya sudah pasang di Blog saya yang wordpress sihh.... di needanews,com karena emang disitu udah disediain sama penyedia theme premium saya. Di Blog WorPress yang saya miliki, Widget ini disebut sebagai smart list.  Bisakah kita memasangnya juga di Blogspot?, saya sudah temukan caranya dan kalau sahabat Blogger mau pasang silahkan ikuti tutorial ini sampai rampung. Meskipun tidak sama persis dengan WordPress namun widget ini cukup menarik dan membantu untuk membagi satu posting dalam beberapa halaman.

Widget seperti ini biasanya digunakan untuk memenggal posting yang terlalu panjang untuk dibuat menjadi beberapa bagian agar pembaca tidak terlalu bosan membaca artikal panjang yang Anda buat. Selain itu bagi Anda yang memasang iklan adsense misalnya, widget ini akan membuat iklan tampil beberapa kali dalam satu judul posting.

Silahkan Klik pada tombol dibawah ini untuk melihat live demonya.

DEMO


Bagaimana?, sudah lihat demonya kalau tidak tertarik silahkan abaikan, kalau tertarik ikuti terus bagaimana cara membagi satu posting dalam beberapa halaman ini.

Poin Penting dalam cara membagi satu posting dalam beberapa halaman ini adalah bahwa Blog anda telah terpasang plugin jquery berikut ini.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Jika belum terpasang silahkan tambahkan kode di atas tepat di bawah kode di template Anda. Jika Anda menggunakan template baru biasanya jquery tersebut sudah terpasang.

Log in ke Blog > Post > Entri baru

Pada Entri baru silahkan pilih mode HTML, setelah terbuka mode HTML silahkan pastekan kode 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">
    Tambahkan Konten Ada disini
    </div>
    <div class="content_2" style="display: none;">
    Tambahkan Konten Ada disini
    </div>
    <div class="content_3" style="display: none;">
    Tambahkan Konten Ada 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>Ganti tulisan “Tambahkan Konten Ada disini” dengan bagian pertama posting yang ingin Anda tampilkan, begitu seterusnya. Dalam demo yang saya buat saya hanya membagi posting dalam 3 bagian karena saya sesuaikan dengan scroll kebawah posting saya. Anda dapat berkreasi dengan merubah kode script diatas, lakukan dengan teliti karena jika salah widget membagi satu posting dalam beberapa halaman ini tidak akan berfungsi. Atau jika Anda ragu, saya kira membagi posting dalam 3 bagian saja sudah cukup seperti dalam demo yang saya buat. Dalam demo saya membagi posting yang terdiri dari 1800 kata menjadi 3 bagian.


Setelah selesai silahkan dipublish, dan sekarang Anda sudah dapat membagi satu posting dalam beberapa halaman.

Tips penting!!!Sebelum Anda dapat membagi satu posting dalam beberapa halaman menggunakan cara ini sebaiknya Anda membuat posting dalam mode compose agar lebih mudah mengatur posting yang Anda buat. Dengan menggunakan mode compose, Anda dapat lebih mudah memasang gambar, mengatur subheading, mengatur ukuran huruf dan lain sebagainya. Setelah posting dalam mode compose selesai klik mode HTML dan pasang kodenya.

Anda dapat berkreasi dengan membuat lebih banyak halaman jika  mau,  dengan merubah scriptnya sesuai kebutuhan. Yang harus Anda lakukan adalah memasangnya dengan teliti dan hati-hati agar dalam membagi satu posting dalam beberapa halaman ini berhasil. Kesalahan dalam pengeditan script akan membuat cara ini tidak berhasil.

Oke, demikian cara membagi satu posting dalam beberapa halaman, sekarang  kamu pengunjung Blog  Anda bisa melihat posting panjang yang Anda miliki sudah terbagi seperti yang  Anda lihat dalam banyak posting yang menggunakan WordPress, Selamat mencoba.

---