Codepelajar – Split post adalah fitur yang populer dalam platform blogging Blogspot yang memungkinkan pengguna untuk membagi satu postingan menjadi beberapa halaman terpisah. Fitur ini berguna ketika pengguna ingin membagikan konten yang panjang atau berfungsi sebagai cara untuk meningkatkan tata letak konten dan memudahkan navigasi bagi pembaca
Split post bekerja dengan cara membagi konten menjadi beberapa bagian yang muncul sebagai halaman terpisah di blog. Setiap bagian konten diberi nomor halaman atau tautan yang dapat diklik, sehingga membantu pengguna untuk beralih antara halaman-halaman tersebut tanpa harus menggulirkan halaman satu per satu.
Cara Membuat Split Post Blogspot
Buka Blogspot > tema > edit html salin css di bawah ini dan tempel di atas kode ]]></b:skin> atau code di atas </style>
• • •
/* 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}
• • •
Salin kode JavaScript dibawah ini dan tempelkan di atas kode </body> atau <!–</body>–></body>
• • •
<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 Menulis Postingan
Saat membuat postingan agar Split Post ini bekerja maka Anda harus menggunakan kode di bawah ini seperti tulisan dan gambar di dalamnya
• • •
<div id='postSplit'>
<!-- tulisan kamu di sini -->
</div>
• • •
dan untuk memisahkan artikel ke halaman berikutnya harus diakhiri dengan tag komentar seperti di bawah ini, kecuali halaman terakhir
• • •
<!--nextpage-->
• • •
Sehingga secara keseluruhan hasilnya akan seperti ini
• • •
<div id='postSplit'>
<h2>halaman 1</h2>
<p>Lorem ipsum dolor sit amet</p>
<!--nextpage-->
<h2>halaman 2</h2>
<p>Lorem ipsum dolor sit amet</p>
<!--nextpage-->
<h2>halaman 3</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
• • •
Oke mungkin itu saja yang dapat Codepelajar sampaikan semoga dapat di pasang pada blog Anda dan menjadikan hal ini daya tarik bagi pengunjung.
