Membagi postingan jadi beberapa halaman menjadi solusi terbaik untuk meningkatkan jumlah tayangan situs Anda, namun menurut saya jika dilihat dari segi SEO hal ini sangat tidak direkomendasikan, membagi artikel menjadi beberapa halaman akan merubah struktur URL situs Anda dan ini akan membingungkan google untuk mencrawl URL tersebut.
Cara split artikel menjadi beberapa halaman di blogger ini sama seperti menggunakan pagination yang artinya membagi beberapa halaman menggunakan nomor halaman. Hanya saja bedanya kalau ini membagi artikel atau postingan menjadi beberapa halaman.
Untuk pengguna wordpress mungkin Anda dapat menggunakan beberapa plugin seperti WP PageNavi, WP Paginate, WP Smart Pagination, dan masih banyak lagi plugin di wordpress untuk membagi halaman posting menjadi multiple page.
Cara Membuat Postingan Blog Menjadi Beberapa Halaman
Perlu Anda ketahui bahwa kode script ini juga hampir sama dengan split posting yang ada pada wordpress, ketika mengklik tombol angka halaman script ini akan meload halaman tersebut, hanya saja ini digunakan pada blogspot.
1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari kode </body>.
4. Copy kode javascript dibawah ini, lalu Paste di atas kode </body>.
<b:if cond=’data:blog.pageType == "item"’>
<b:if cond=’data:blog.isMobile == "false"’>
<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=’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>
5. Cari kode </style> atau ]]></b:skin>
6. Copy kode css dibawah ini, lalu Paste diatas kode </style> atau ]]></b:skin>
/* Page Navigation */
.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}
7. Lalu klik Simpan tema
Catatan :
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 Menulis Postingan Menjadi Beberapa Halaman
1. Edit salah satu postingan blog Anda.
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode <div id=”postsplit”> diawal tulisan dan tambahkan kode </div> diakhir tulisan.
4. Untuk membagi postingan, gunakan kode <!–nextpage–>.
5. Setelah selesai klik Perbarui artikel.
Itulah artikel mengenai cara membagi postingan blog menjadi beberapa halaman, jika Anda memiliki saran maupun pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.