Multiple Pages for Blogger: Cara Membuat Postingan Menjadi Beberapa Halaman

Baca Juga

Hampir semua situs berita membagi beritanya menjadi beberapa halaman (muliple pages). Setelah beberapa alinea, di bawah ada link "Halaman Selanjutnya" plus angka halaman 1, 2, 3. dst.

Itu trik supaya meningkatkan pageviews dan durasi membuka halaman web yang bagus buat SEO.

Kita juga bisa membuat multiple page di postingan Blogger. Di website wordpress mah gampang pisan. Ada short code dan ada plugin. Cek: Cara Membagi Tulisan Menjadi Beberapa Halaman

Nah, kalau Cara Membuat Postingan Blogger Menjadi Beberapa Halaman - Multiple Pages agak ribet. Bahkan, mungkin "ribet banget".

Saya simpan tips Cara Membuat Postingan Blogger Menjadi Beberapa Halaman (Multiple Pages) untuk dicoba lain waktu.

Cara Membuat Multiple Pages pada Postingan Blogger

Ada dua cara Cara Membuat Multiple Pages pada Postingan Blogger.

Cara #1 Multiple Pages untuk Postingan Tertentu

Cara ini dilakukan di halaman membuat posting. Saat membuat posting, masukkan kode berikut ini di mode HTML.

<span class="content1">
<!-- Bagian 1 Tulisan di Sini -->
</span>

<span class="content2" style="display:none">
<!-- Bagian 2 Tulisan di Sini -->
</span>

<span class="content3" style="display:none">
<!-- Bagian 3 Tulisan di Sini -->
</span>

<span class="content4" style="display:none">
<!-- Bagian 4 Tulisan di Sini -->
</span>


<p><b>Pages: <span style="color: #3d85c6;">
<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>

Catatan: Jangan klik "Pratinjau" (Preview). Langsung publikasikan (publish!

Itu dia cara pertama membagi postingan blog menjadi beberapa halaman (multiple pages).

Cara #2. Multiple Page Otomatis

Ini cara kedua membangi artikel di blog Blogger menjadi beberapa bagian/halaman.

1. Di dasbor Blogger: Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> atau di atas kode </style> dengan Tag Kondisional.

.post-content{display:none}.dblanter{font-size:130%;text-align:center}.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}.tombol.blanter{background:#000}.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}

3. Copas kode berikut ino di atas kode </body>

<script style='text/javascript'>//<![CDATA[
function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")});//]]></script>

4. Copas kode berikut ini setelah kode <data:post.body/> 

<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><br/><p class='paging'/>

Cara ini memunculkan tombol pagination di seluruh artikel secara otomatis. 

Jika Anda hanya ingin memunculkan tombol pagination di artikel tertentu, maka lakukan secara manual ketika Anda membuat postingan baru. 

Copas kode no 4 di atas, tempatkan di bawah artikel pada mode HTML

Cara Lain

Cara lain  jika Anda hanya ingin memunculkan tombol pagination di artikel tertentu, Anda juga harus menggunakan mode HTML (bukan Compose): 

Copas kode berikut ini:

<div class="post-content content_1">
Isi artikel halaman 1.
</div>

<div class="post-content content_2">
Isi artikel halaman 2.
</div>

<div class="post-content content_3">
Isi artikel halaman 3.
</div>

Jika sudah selesai, klik “Publikasikan”.

Sumber1, Sumber2