cara membuat postingan terpisah di blogger

Postingan terpisah di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat split post / membagi postingan menjadi beberapa halaman di blogger.

split post ini biasanya bisa kita jumpai di blog yang cendrung 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.

buat kalian yang cendrung menulis artikel yang panjang maka split post ini akan sangat membantu, selain blog terlihat lebih rapih juga dapat memberikan pengalaman membaca yang lebih baik lagi.

untuk demonya kalian bisa klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

DEMO

Cara Membuat Split Post Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </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}

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau </body> jika sudah jangan lupa untuk klik simpan.

catatan
jika mengunakan template median-ui 1.5 cukup menggunakan javascript saja karena css sudah terdapat di dalam template kalian, dan penting ubah div.post-body menjadi 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 di akhiri tag comment seperti di bawah ini, terkecuali halaman terakhir.

<!--nextpage-->

sehingga keseluruhan kurang lebih akan tampak seperti di bawah 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>