June 5, 2018

Multipage Blogger: Cara Membagi Posting Blog Menjadi Beberapa Halaman

June 5, 2018

Multipage Blogger: Cara Membagi Posting Blog Menjadi Beberapa Halaman
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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

8 comments on Multipage Blogger: Cara Membagi Posting Blog Menjadi Beberapa Halaman

  1. kalau untuk di wordpress gimana ya mas ? tanpa plugin

    ReplyDelete
    Replies
    1. Di WP mah gampang, tingal tekan Alt + Shift + P di bagian bawah artikel yang akan dipotong atau pasangkan kode . Plugin juga bisa. Namanya "WP Create Multiple Posts & Pages".

      Delete
  2. Replies
    1. Coba lagi. Kalau tetap gak work, gak cocok templatenya.

      Delete
  3. yang mana yang paling ringan kirakira gan?

    ReplyDelete
  4. it's working
    tapi khusus versi web, kalo buka lewat mobile view, halamannya tidak terbagi lagi, langsung tampil full semua ke bawah

    ReplyDelete

Contact Form

Name

Email *

Message *