Membagi Postingan Blog Menjadi Beberapa Halaman
Kali ini aku akan membuatkan tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, untuk caranya cukup gampang kita hanya menambahkan beberapa aba-aba untuk membagi postingn blog.
Fungsi membagi postingan blog menjadi beberapa halaman ialah 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 kemudian Buka Menu Tema klik Edit HTML.
Tempatkan aba-aba CSS dibawah ini diatas aba-aba </style> atau ]]></b:skin>.
/* Pagenav Post By */ .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 aba-aba JavaScript dibawah ini diatas aba-aba </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 jikalau pada bab post di template Anda memakai aba-aba <div class = 'post-body'>.
Perhatikan aba-aba berikut:
var nodes = document.querySelector('div.post-body').children;Anda hanya perlu menyesuaikan bab div.post-body dengan aba-aba post yang ada pada template blog Anda. Contohnya:
- <div class='post-body'> memakai div.post-body
- <div class='post'> memakai div.post
- <div id='post-body'> memakai div#post-body
- <div id='post'> memakai div#post
Cara Membagi Postingan Menjadi Beberapa Halaman
Buat atau buka postingan yang akan di bagi menjadi beberapa halaman, edit melalui sajian HTML bukan Compose.
Tambahkan aba-aba <div id="postsplit"> diawal goresan pena dan tambahkan aba-aba </div> diakhir tulisan.
Untuk membagi Postingan gunakan aba-aba dibawah ini.
<!--nextpage--> Penempatan Kode diatas dapat dilihat ibarat gambar dibawah ini.
Jika sudah, tinggal Perbarui atau Publikasikan postingan dan lihat hasilnya.
Sekian tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, Selamat Mencoba dan Semoga Bermanfaat.... Sumber https://www.denylistianto.com/