Hampir semua situs berita di Indonesia, dengan "pelopor" Tribunnews, kini menerapkan multipages. Naskah panjang dipotong lalu di bawahnya ada tulisan "Halaman Selanjutnya" atau "Halaman Berikutnya" plus angka Halaman 1, 2, 3, dst.
Katanya, membagi postingan panjang menjadi beberapa halaman itu untuk SEO juga, khususnya untuk PageViews (PV) dan mengurangi Bounce Rate.
Kita, para blogger, bisa meniru (membuat multipages) di postingan blog, khususnya untuk tulisan panjang (long post).
Di blog selfhosted WordPress, yaitu blog dengan nama domain dan hosting berbayar serta menggunakan CMS Wordpress, membuat multiple pages atau pagination sangat mudah, yaitu dengan menekan Ctrl+Shif+P di tiap bagian akhir naskah yang dipotong.
Membuat multipages di Wordpress juga bisa menggunakan bantuan plugin. Bagaimana dengan di Blogger?
Nah, berikut ini cara membuat multipages di Blogger. Kode pagination untuk Blogger umumnya tidak menggunakan fungsi refresh.
Artinya, walaupun pembaca artikel mengklik halaman 1, 2, 3, dan seterusnya, mereka seperti hanya membuka satu halaman saja.
Dengan begitu, pageviews pun tidak akan bertambah tiap kali mereka mengklik bagian atau halaman berikutnya.
Kali ini kita akan belajar membuat multiple pages pada Blogger dengan halaman tidak terbatas dan blog akan otomatis refresh.
Cara #1 Membuat Multiple Pages di Blogger
#1. Masuk ke dasbor Blogger > “Tema” > “Edit HTML”.#2. Salin dan tempel kode CSS di bawah ini di atas kode ]]></b:skin>
.post-content{display:none}.dblanter{font-size:130%;text-align:center}.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}.tombol.blanter{background:#000}.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}
#3. Tambahkan kode JavaScript berikut ini tepat di atas kode </body>
<script style='text/javascript'>//<![CDATA[
function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")});//]]></script>
#4. Berikutnya kita buat tombol pagination.
Ada dua opsi yaitu tombol akan muncul secara otomatis di semua artikel atau bisa dimunculkan pada artikel tertentu saja.
Otomatis
Jika Anda ingin memunculkan tombol pagination di seluruh artikel secara otomatis, maka copas kode berikut ini setelah kode <data:post.body/>
Kode <data:post.body/> di template blog biasanya ada dua atau tiga. Coba pilih kode yang kedua atau ketiga.
Manual
Jika ingin memunculkan tombol pagination di artikel tertentu, maka copas kode berikut ini di bawah artikel akhir postingan pada mode HTML.
Otomatis
Jika Anda ingin memunculkan tombol pagination di seluruh artikel secara otomatis, maka copas kode berikut ini setelah kode <data:post.body/>
<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><p class='paging'/>
Kode <data:post.body/> di template blog biasanya ada dua atau tiga. Coba pilih kode yang kedua atau ketiga.
Manual
Jika ingin memunculkan tombol pagination di artikel tertentu, maka copas kode berikut ini di bawah artikel akhir postingan pada mode HTML.
<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><br/><p class='paging'/>
Kira-kira hasilnya akan seperti ini:
Menerapkan ke Artikel
Penerapan kode multiplepages ini dilakukan secara manual. Ketika akan membuat postingan baru, klik mode HTML (bukan Compose), lalu copas kode berikut:
<div class="post-content content_1">
<!-- Isi artikel halaman 1 -->
</div>
Buat sebanyak-banyaknya sesuai kebutuhan. Cukup ganti angka 1 dengan 2, 3, 4, 5, 6, dan seterusnya seperti contoh berikut:
<div class="post-content content_1">
Isi artikel halaman 1.
</div>
<div class="post-content content_2">
Isi artikel halaman 2.
</div>
<div class="post-content content_3">
Isi artikel halaman 3.
</div>
Jika sudah selesai, klik “Publikasikan”. Tahapan membuat multiple pages di Blogger sudah kelar. Kodenya didapat di Idblanter.
Cara #2 Membuat Multiple Pages di Blogger
Berikut ini cara lain membagi postingan Blog menjadi beberapa halaman. Yang ini lebih mudah.
1. Klik Tema > Edit HTML
2. Copy kode berikut ini di atas kode </body>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.isMobile == "false"'><script type='text/javascript'> //<![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('?'); 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='cm-pagenav cm-clearfix' id='post-pager'><span class='page current'>Page :</span> </div>"; } if( no>1 ){ document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+(no-1)+"' title='Previous Page'> Previous</a>"; } content.forEach(function(item) { if( no == i ){ document.getElementById('post-pager').innerHTML += "<span class='current'>"+i+"</span>"; } else { document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+i+"' rel='nofollow' title='Page "+i+"'>"+i+"</a>"; } i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+nn+"' rel='nofollow' title='Next Page'>Next</a>"; } }); //]]> </script></b:if></b:if>
4. Copy kode berikut ini di atas kode ]]></b:skin>
.cm-pagenav{text-align:center;line-height:1.4em;margin:15px 0 30px 0;text-align:center;font-size:14px}.cm-pagenav span,.cm-pagenav a{background-color:#4e92df;box-shadow:0px 6px #4886ca;-moz-box-shadow:0px 6px #4886ca;-webkit-box-shadow:0px 6px #4886ca;-moz-transition:none;-webkit-transition:none;transition:none;display:inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align:middle;font-size:14px;color:#fff !important;text-decoration:none !important}.cm-pagenav .pages{background:#4e92df;color:#fff}.cm-pagenav .current,.cm-pagenav a:hover{top:4px;position:relative;box-shadow:0px 2px #4886ca;-moz-box-shadow:0px 2px #4886ca;-webkit-box-shadow:0px 2px #4886ca}.cm-pagenav a:active{top:6px;position:relative;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.cm-pagenav .pages{display:none}.cm-clearfix{clear:both}
6. Save! Klik Simpan Tema
Catatan: Kode script diatas mungkin tidak akan bekerja disemua template, perhatihan bahwa script di atas berfungsi jika pada bagian post di template Anda menggunakan kode <div class='post-body'>
Perhatikan kode berikut:
var nodes = document.querySelector('div.post-body').children;
Anda hanya perlu menyesuaikan bagian div.post-body dengan kode post yang ada pada template blog Anda.
Contohnya:
<div class='post-body'> menggunakan div.post-body
<div class='post'> menggunakan div.post
<div id='post-body'> menggunakan div#post-body
<div id='post'> menggunakan div#post
Cara Membagi Postingan Menjadi Beberapa Halaman
1. Edit salah satu postingan blog Anda.
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode <div id="postsplit"> di awal tulisan dan tambahkan kode </div> diakhir tulisan.
4. Untuk membagi postingan, gunakan kode <!--nextpage-->
Kode multipage untuk Blogger yang kedua dari Gianmr.
Itu dia Cara Membuat Multiple Pages di Blogger, Membagi Postingan Blog Jadi Beberapa Halaman.*
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode <div id="postsplit"> di awal tulisan dan tambahkan kode </div> diakhir tulisan.
4. Untuk membagi postingan, gunakan kode <!--nextpage-->
Kode multipage untuk Blogger yang kedua dari Gianmr.
Itu dia Cara Membuat Multiple Pages di Blogger, Membagi Postingan Blog Jadi Beberapa Halaman.*
Post a Comment
Post a Comment