Multipage Blogger: Cara Membagi Posting Blog Menjadi Beberapa Halaman

Baca Juga

Cara Membagi Posting Menjadi Beberapa Halaman (Break Post In Multiple Pages, Multipage for Blogger).

Artikel panjang di blog kita bisa dibagi menjadi beberapa halaman atau beberapa bagian. 

Tujuan membagi posting menjadi beberapa halaman (multiple pages) ini adalah untuk meningkatkan pageviews, sebagaimana dilakukan situs-situs berita.

Namun, membuat posting menjadi beberapa halaman ini ini akan ngeselin pembaca, karena harus mereka harus klik beberapa kali jika akan membaca postingan berikutnya 

Lihat DEMO.

Banyak situs berita menerapkannya untuk meningkatkan pageviws, terutama Tribunnews yang menang jagonya ngeselin pembaca dalam hal multiple pages dan judul umpan klik (clickbait headlines).

Cara #1 Membagi Posting Menjadi Beberapa Halaman

Berikut ini cara membagi artikel menjadi beberapa halaman di blog Blogger.

Pastikan ada kode ini di template blog Anda:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

1. Tema > Edit HTML

2. Kode CSS. Dipasang di atas kode </head>

  <!-- Multipage Post CSS -->

  <b:if cond='data:view.isPost'>

              <style>

                .cm-pagenav{text-align:center;line-height:1.4em;margin:15px 0 30px 0;text-align:center;font-size:14px}.cm-pagenav span,.cm-pagenav a{background-color:#4e92df;box-shadow:0px 6px #4886ca;-moz-box-shadow:0px 6px #4886ca;-webkit-box-shadow:0px 6px #4886ca;-moz-transition:none;-webkit-transition:none;transition:none;display:inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align:middle;font-size:14px;color:#fff !important;text-decoration:none !important}.cm-pagenav .pages{background:#4e92df;color:#fff}.cm-pagenav .current,.cm-pagenav a:hover{top:4px;position:relative;box-shadow:0px 2px #4886ca;-moz-box-shadow:0px 2px #4886ca;-webkit-box-shadow:0px 2px #4886ca}.cm-pagenav a:active{top:6px;position:relative;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.cm-pagenav .pages{display:none}.cm-clearfix{clear:both}

              </style>

              </b:if>

              

3. Kode JavaScript. Dipasang di atas kode </body>

      <!-- Multipage Post JS -->

 <b:if cond='data:view.isPost'>

 <b:if cond='data:blog.isMobile == &quot;false&quot;'>

  <script type='text/javascript'>

  //<![CDATA[

  document.addEventListener('DOMContentLoaded', function() {

   function checkChildren(nodes, elemId){

    for(i=0;i<nodes.length;i++){

     if(nodes[i].id==elemId){

      return nodes[i];

     }else{

      return checkChildren(nodes[i].children, elemId);

     }

    }

   }

   function isNumeric(value) {

    var type = typeof value;

    return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));

   }

   var nodes = document.querySelector('div.post-content').children;

   var splitdong = checkChildren(nodes, 'postsplit').innerHTML;

   var content = splitdong.split('<!--nextpage-->');

   var url = window.location.href;

   var url = url.split('?');

   var no = url[1] + '&m=4';

   var no = no.split('m');

   var no = no[0];

   var no = no.replace('&', '');

   var url = url[0];

   var i = 1;

   if( !isNumeric(no) ){

    var no = 1;

   }

   document.getElementById('postsplit').innerHTML = content[no-1];

   if( content.length > 1 ) {

    document.getElementById('postsplit').innerHTML += "<div class='cm-pagenav cm-clearfix' id='post-pager'><span class='page current'>Page :</span> </div>";

   }  

   if( no>1 ){

    document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+(no-1)+"' title='Previous Page'> Previous</a>";

   }

   content.forEach(function(item) {

    if( no == i ){

     document.getElementById('post-pager').innerHTML += "<span class='current'>"+i+"</span>";

    } else {

     document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+i+"' rel='nofollow' title='Page "+i+"'>"+i+"</a>";

    }

    i++;

   }); 

   if(content.length > no){

    var nn = parseInt(no) + 1;

    document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+nn+"' rel='nofollow' title='Next Page'>Next</a>";

     }

  });

  //]]>

  </script>

 </b:if>

</b:if>

4. Save. Simpan Template!

5. Kode HTML

Kode HTML berikut ini dipasang dalam postingan mode HTML. Kode <!--nextpage--> bisa digunakan sekali, dua kali, atau berapa kali aja, tergantung panjang artikel atau keinginan Anda.

<div class="post-content">

  <div id="postsplit">

    Content page 1. Bagian pertama atau halaman pertama postingan di sini.

<!--nextpage-->

    Content page 2. Bagian kedua artikel di sini.

    <!--nextpage-->

    Content page 3. Bagian ketiga postingan di sini. Ini bagian terakhir.

    </div>

  </div>

6. Selesai.

Sumber Kode dan Demo: CodePen.

Cara #2 Membagi Posting Menjadi Multiple Pages

Pastikan ada kode ini di template blog Anda:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

CSS

Simpan di atas kode ]]></b:skin>

.post-pagination {margin: 40px auto;text-align: center;width: 100%;float:left;}
.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;}

JavaScript

Simpan di atas kode </head>

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

Save your template!

Simpan Template!

Menampilkan Multipage di Postingan

Saat menulis postingan yang akan dipilah menjadi beberapa halaman atau dibagi menjadi beberapa halaman, klik mode HTML.

Post > New post > klick mode HTML

Copas kode berikut ini:

<div class="content_1">
Posting Bagian Pertama di Sini
</div>
<div class="content_2" style="display: none;">
Posting Bagian Kedua di Sini
</div>
<div class="content_3" style="display: none;">
Posting Bagian Ketiga di Sini
</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>

Publish!

Cara Lain Membagi Posting Blog Menjadi Beberapa Halaman

1. Pasang kode CSS

Copas kode CSS Multipage for Blogger berikut ini di atas kode ]]></b:skin>

.post-content{display:none}.dmultipageblogger{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: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.multipageblogger{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}}

2. Pasang kode JavaScript.

Simpan kode berikut ini 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("multipageblogger"),n==n&&$(".tombol.n"+n).toggleClass("multipageblogger")});//]]></script>

3. Jika ingin memunculkan multigape secara otomatis di semua postingan, copas kode berikut ini setelah kode <data:post.body/> yang kedua atau ketiga.

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

Save! Simpan template.

4. Jika akan menampilkannya hanya di postingan tertentu, lewati No. 3, simpan template (save), dan lakukan langkah berikut ini:

- Pilih postingan yang akan dibagi menjadi beberapa halaman.

- Klik Edit 

- Klik mode HTML

- Copas kode berikut ini bagian bawah postingan:

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

Masih di mode HTML, copas kode berikut ini sekaligus membagi artikel menjadi beberapa halaman:

<div class="post-content content_1">

Isi artikel halaman 1.

</div>

Buat sebanyak-banyaknya sesuai kebutuhan. Cukup ganti angka 1 dengan 2, 3, 4, 5, 6, dan seterusnya seperti contoh berikut:

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

Demikian Cara Membagi Posting Blog Menjadi Beberapa Halaman (Break Post In Multiple Pages). Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber