Script HTML Split Post Template Median UI 1.6, 100% Work !

DIBALIK LAYAR - Template Median UI 1.6 yang dikembangkan oleh mas Muhammad Maki dari jagodesain.com sangat cocok untuk tampilan blog yang santai tapi tetap elegan, tidak kalah dengan template berita yang dipakai oleh media online.

Yakni terdapat split post pada setiap postingan beritanya, nah berikut saya bagikan script html untuk pembuatan split post sama seperti tampilan postingan ini.

Script ini hanya berlaku di template median ui 1.6, saya mencoba di Jokkajo.Com yang menggunakan template Linkmagz karya Mas Sugeng dari Sugeng.id. mungkin bisa work dengan menambahkan script css di bagian skin.

Jokkajo.com tidak membuat situs ini dengan banyak kalimat pembuka yang kurang bermanfaat

Silahkan Copy scriptnya di halaman selanjutnya...

Ini adalah script split post ala median UI1.6

<div id='postSplit'> First page here... <!--nextpage--> Second page here... <!--nextpage--> Third page here... </div> <script>/*<![CDATA[*/ /* Share by supportjo.blogspot.com*/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.postBody').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='blogPg' 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>

Sumber : Jagodesain.com

Cara pengaplikasiannya cukup mudah, silahkan baca sesuai petunjuk script, setiap page dipisahkan oleh kode komen <!--nextpage-->. Dan selanjutnya script terakhir di taruh paling bawah postingan

Selamat mencoba..!

Jika terdapat eror atau halaman tidak sesuai angka yang tertera, silahkan perhatikan lagi peletakkan kode 'div'. usahakan page dibuat minimal 3 page.

Baca juga :