Jagoan Kibot Blogging Membagi postingan blogspot menjadi beberapa halaman

Membagi postingan blogspot menjadi beberapa halaman

Memposting satu artikel yang panjang dalam satu halaman tentu menjadi tidak bijaksana. Selain memaksa pembaca harus terus menerus menekan scroll bar, terkadang pembaca juga langsung merasa ill feel dan kemudian malas untuk membaca artikel tersebut sampai selesai.

Solusi dari memposting artikel panjang dalam satu halaman adalah menggunakan fitur insert jump break. Hanya saja tidak semua pembuat templates mensupport hal ini, terkadang kita perlu untuk mengedit blogger themesnya secara manual dan menambah beberapa baris kode seperti berikut :

<data:post.body/>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Hanya saja dalam postingan kali ini saya lebih tertarik membuat page break dengan menggunakan java script seperti dibawah ini. Agar script dibawah ini dapat berfungsi dengan baik,maka pastikan bahwa themes yang digunakan sudah terintegrasi dengan jQuery plugin.

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

Menggunakan tehnik ini memang agak tricky tapi terkadang disinilah seninya. Ada beberapa orang yang menyukai kemudahan dalam membuat page break dalam blogspot dengan menggunakan fungsi insert jump break. Tapi ada juga yang suka dengan sedikit tantangan seperti menggunakan tehnik membagi halaman blogpsot menggunakan javascript.

Langkah-langkah membagi halaman blogspot menggunakan javascript adalah sebagai berikut :

Edit atau buat postingan yang berisi artikel yang panjang, dalam percobaan ini artikel akan dibagi menjadi 3 halaman.
Copy code diatas, dalam mode HTML paste code tersebut dibagian paling atas postingan.
Masih dalam mode HTML, cut artikel yang akan dijadikan pada halaman satu, kemudian pastekan pada bagian <div class='content_1'>artikel halaman satu</div>
Ulangi langkah ke tiga untuk artikel halaman dua dan tiga.
Save

Script ini masih bisa dimodifikasi sesuai kebutuhan, misalkan untuk membagi halaman blogspot menjadi 4 atau 5 halaman. Sepertinya tidak terlalu sulit untuk diaplikasikan ya??
Jika ada kesulitan atau pertanyaan, silahkan diposting dikolom komentar ya. Selamat mencoba.

Demo membagi halaman blogspot menggunakan javascript

12 comments

AUTHOR

Jumat, 20 Februari, 2015 delete

saya sudah berhasil mencoba dengan 4 halaman, tapi mengapa yang tombol hal 1 nya melompat ke sisi kanan ya Mas Gan?

AUTHOR

Selasa, 24 Februari, 2015 delete

oh ya bisa lihat SS nya gan?

AUTHOR

Kamis, 21 Mei, 2015 delete

Makasih banget bos, ijin pakai dan sudah saya praktekkin and sukses, terima kasih, sangat bermanfaat sekali, salam kenal.

Muhammad Abdul Ghofur

AUTHOR

Jumat, 03 Juli, 2015 delete

Terimakasih ya gan atas pengetahuanya,.., Salam kenal gan,.,

AUTHOR

Minggu, 12 Juli, 2015 delete

Oke sama-sama bro, salamkenal kembali :)

AUTHOR

Senin, 31 Agustus, 2015 delete

bahaya ga buat seo mas ??

AUTHOR

Jumat, 19 Februari, 2016 delete

maaf nihh bang mau nanya... kok nggak bisa, melangkah ke halaman selanjutnya?

wizdanzackyfauzan

AUTHOR

Jumat, 26 Februari, 2016 delete

nyari2 akhirnya ketemu disini..tengkyu bang

AUTHOR

Rabu, 23 Maret, 2016 delete

Masih bingung gan..bdw thx banget triknya
Mantap dah

AUTHOR

Minggu, 19 Juni, 2016 delete

Di Demo nya biasa aja gan masih 1 halaman

AUTHOR

Minggu, 19 Juni, 2016 delete

Di Demo nya biasa aja gan masih 1 halaman

AUTHOR

Kamis, 14 Juli, 2016 delete

oh iya gan, ini artikel 1 tahun yang lalu. Nanti sy coba cek lagi kodenya.

terimakasih

EmoticonEmoticon

Langganan: Posting Komentar (Atom)