bergabung di grup telegram kami

cara membuat split post di blogger

cara membuat split post di blogger
cara membuat split post 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.

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 &lt;!--</body>--&gt;&lt;/body&gt; 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>

ok sampai di sini saya harap kalian sudah paham, jadi sekian cara membuat split post di blogger semoga bermanfaat dan terima kasih sudah berkunjung.

source code:
https://median-ui.jagodesain.com

Baca juga :

17 komentar



image quote pre code
  1. Not Work in my template
    1. what template do you use?
  2. Di Median UI 1.5 tak berfungsi javascriptnya ketika klik tombol kedua, dst eh kembali lagi ke satu otomatis
  3. Bearti anda salah dalam menerapkannya, ini script juga emang saya dapatkan dari template median ui, bisa cek pada blog demo juga work tidak ada masalah itu juga menggunakan kerangka median ui, dan di vidio youtube saya menerapkan di template lain juga work
  4. Tapi kok pas klik next malah muncul dulu semua halaman lalu muncul halaman yang dituju?
    1. pastikan sudah mengikuti cara penulisan pada postingan yang sudah di jelaskan
    2. Sudah diikuti semuanya tapi tetap saja sama hasilnya
    3. pkai template apa?
  5. Ko Wendy, ga work lagi ya tutorial ini, sudah berkali-kali coba, gagal
    1. work kok, jika emang ttap gk bisa, mesen jasa pasang aja
  6. Hey Sir this script is working properly inside post but I want to use it inside pages but it's not working inside the pages

    Can you help
    1. change conditional tags
      data:view.isPost to data:view.isSingleItem
  7. untuk template linkmagz bisa gk mas?
    1. bisa untuk semua template, kalau gk work juga biasanya ada perbedaan class postbody nya tinggal di sesuaikan aja dengan templatenya
    2. Work sih min, tp iklan gak muncul di dalam / tengah artikel.
      Bahkan related post tengah artikel juga gak muncul 😔

      Pakek template jannify
  8. Kalo biar cuma button prev dan next aja gimana ya tanpa angka? Sama apakah nanti kalo ada toc saat klik langsung mengarah ke tag yg dituju?
    1. Tidak bisa mas
© 2020 - Wendy Code