SPLIT POST - Biasanya bisa dijumpai di blog yang cenderung memiliki tulisan yang panjang seperti blog berita dan sebagainya, split post berfungsi menyembunyikan tulisan kita, dan membagi menjadi beberapa halaman dan hanya di tampilkan ketika user klik tombol angka selanjutnya atau next.
Untuk demonya kalian bisa klik tombol dibawah
Cara membuat Split Post Di Blogger
Silakan masuk ke blogger > tema > edit html > salin css di bawah ini dan letakkan di atas kode ]]></b:skin>
/* split post ubah warna cari kode #f09800 */
.postNav{display:flex;flex-wrap:wrap;justify-content:center; font-size:90%;line-height:20px; color:#fefefe; margin-top:30px;margin-bottom:0}
.postNav > *{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px; color:inherit;background-color:#f09800; border-radius:2px;text-decoration:none} .postNav > *:hover{opacity:.8}
.postNav .current{background-color:rgba(0,0,0,.03); color:#989b9f}
.postNav{font-size:13px; margin:50px 0} .postNav > *{padding:8px 15px;border-radius:2px;margin-bottom:8px} .postNav > *:not(:last-child){margin-right:8px}
Dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau <!--</body>--></body> jika sudah jangan lupa untuk klik simpan.
*Catatan
Jika menggunakan template Median UI 1.5 cukup menggunakan javascript saja karena css sudah terdapat di dalam template kalian dan penting ubah div.post-body atau div.postBody pada javascript di bawah ini.
<b:if cond='data:view.isPost'>
<script>/*<![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('?page='); 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='postNav' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/</script>
</b:if>Cara Penulisan Pada Postingan
Saat membuat artikel harus menggunakan tag html di bawah ini, jadi tulisan maupun gambar kamu harus berada di dalamnya.
<div id='postSplit'>
<!-- tulisan kamu di sini -->
</div>
Dan setiap memisahkan artikel ke halaman berikutnya harus diakhiri tag comment seperti dibawah ini, kecuali halaman terakhir.
Sehingga keseluruhan kurang lebih akan tampak seperti dibawah ini.
<div id='postSplit'>
<h2>halaman 1</h2>
<p>Lorem ipsum dolor sit amet</p>
<h2>halaman 2</h2>
<p>Lorem ipsum dolor sit amet</p>
<h2>halaman 3</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
Semoga bermanfaat dan terima kasih sudah berkunjung
-01.jpeg)