Hallo sobat okayim, pada kesempatan kali ini saya akan membuat isi halaman postingan artikel blog menjadi beberapa halaman yang biasa dikenal dengan istilah split post.
Cara Membuat Split Post Di Blogspot
Pernah gak sobat okayim membaca-baca berita di situs-situs berita besar di Indonesia seperti TRIBUNNEWS, DETIK , KOMPAS, CNN , DLL. ?
Split post itu biasanya sering digunakan beberapa situs berita yang memiliki isi artikel yang super panjang. Terutama yang sering menggunakan split post situs-situs berita besar seperti yang sudah saya sebutkan.
Split post sendiri berfungsi untuk menyembunyikan beberapa isi teks artikel yang mana nantinya akan dibagi menjadi beberapa halaman untuk di tampilkan. Sebagian halaman yang disembunyikan oleh split post hanya akan tampil jika pembaca / pengunjung membukanya dengan tombol next atau selanjutnya.
Buat sobat yang mungkin mempunyai blog dan menulis artikel lebih dari 1000 atau. Maka split post ini akan membantu merapihkan tampilan artikel sobat.
Cara Membuat Tampilan Artikel Menjadi Beberapa Halaman ( Split Post )
Seperti biasa silahkan sobat pasang code CSS dibawah ini di pengaturan CSS template blogger milik sobat.
/* 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}
Kemudian pasang code javascript nya juga di atas code </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 Split Post Agar Tampilan Artikel Dibagi Beberapa Halaman
Saat sobat lagi Menulis artikel di blogger milik sobat. Sobat harus menulisnya dalam mode html penuh. Kemudian pastekan code html split post dibawah ini.
<div id='postSplit'>
<!-- tulisan kamu di sini -->
</div>
Ganti code berwarna merah dengan isi artikel milik sobat nantinya.
Dan untuk memisahkan setiap halaman kata artikel jika ingin dipisahkan menjadi beberapa halaman maka harus di akhiri dengan tag.
<!--nextpage-->
Sehingga contoh jika sobat ingin membuat tampilan artikel menjadi tiga halaman split post maka contoh codenya seperti dibawah 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>
Sampai disini sobat sudah faham bukan ?. Jika sudah maka saya undur diri dari CARA BUAT SPLIT POST DI BLOGGER.