Membagi Postingan Blog Menjadi Beberapa Halaman - Deny Listianto

July 8, 2018

Membagi Postingan Blog Menjadi Beberapa Halaman

Membagi Postingan Blog

Kali ini saya akan berbagi tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, untuk caranya cukup mudah kita hanya menambahkan beberapa kode untuk membagi postingn blog.

Fungsi membagi postingan blog menjadi beberapa halaman adalah merapikan atau memperpendek artikel yang panjang menjadi beberapa halaman.

Baiklah, bagi yang penasara dan ingin mencobanya ikuti tutorial berikut ini.

Cara Membagi Konten Artikel Blog Menjadi Beberapa Halaman


Masuk ke Blogger.com lalu Buka Menu Tema klik Edit HTML.

Tempatkan kode CSS dibawah ini diatas kode </style> atau ]]></b:skin>.

/* Pagenav Post By Deny Listianto */
.dl-pagenav{text-align:center;line-height:1.4em;margin:15px 0 30px 0;}
.dl-pagenav span,.dl-pagenav a{font-weight:700;background:#fff;display:inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align:middle;font-size:14px;border: 1px solid #ccc;color:#666;text-decoration:none!important}
.dl-pagenav a:hover{position:relative;background:#e74c3c;color:#fff;border: 1px solid #e74c3c;}
.dl-pagenav a:active{background:#e74c3c;color:#fff;border: 1px solid #e74c3c;}
.dl-pagenav .pages{display:none}
.dl-clearfix{clear:both}

Letakkan kode JavaScript dibawah ini diatas kode </body>.

<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-body').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='dl-pagenav dl-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>

Selanjutnya klik Simpan tema.

Kode script diatas mungkin tidak akan bekerja disemua template, perhatihan bahwa script diatas berfungsi jika pada bagian post di template Anda menggunakan kode <div class = 'post-body'>.

Perhatikan kode berikut:

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

Anda hanya perlu menyesuaikan bagian div.post-body dengan kode post yang ada pada template blog Anda. Contohnya:

  • <div class='post-body'> menggunakan div.post-body
  • <div class='post'> menggunakan div.post
  • <div id='post-body'> menggunakan div#post-body
  • <div id='post'> menggunakan div#post

Cara Membagi Postingan Menjadi Beberapa Halaman


Buat atau buka postingan yang akan di bagi menjadi beberapa halaman, edit melalui menu HTML bukan Compose.

Tambahkan kode <div id="postsplit"> diawal tulisan dan tambahkan kode </div> diakhir tulisan.

Membagi Postingan Blog

Untuk membagi Postingan gunakan kode dibawah ini.

<!--nextpage-->

Penempatan Kode diatas bisa dilihat seperti gambar dibawah ini.

Membagi Postingan Blog

Jika sudah, tinggal Perbarui atau Publikasikan postingan dan lihat hasilnya.


Sekian tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, Selamat Mencoba dan Semoga Bermanfaat....
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo