Cara Membagi Postingan Blog Menjadi Beberapa Halaman
Minggu, 25 Februari 2018
17 Komentar
Cara Membagi Postingan Blog Menjadi Beberapa Halaman - Membuat satu halaman posting menjadi beberapa halaman di blog merupakan salah satu cara untuk meningkatkan pageview blog Anda. Pembagian halaman post biasanya digunakan oleh situs web yang menyediakan berbagai informasi yang panjang, seperti situs portal berita dan sebagainya.
Membagi postingan jadi beberapa halaman menjadi solusi terbaik untuk meningkatkan jumlah tayangan situs Anda, namun menurut saya jika dilihat dari segi SEO hal ini sangat tidak direkomendasikan, membagi artikel menjadi beberapa halaman akan merubah struktur URL situs Anda dan ini akan membingungkan google untuk mencrawl URL tersebut. Selain itu jika dilihat dari segi pembaca, hal ini tidak user friendly karena mungkin sebagian pembaca malas untuk membaca halaman selanjutnya dari artikel tersebut.
Namun hal ini kembali lagi kepada Anda, jika memang perlu membagi artikel atau postingan menjadi beberapa halaman atau page merupakan suatu kebutuhan untuk blog Anda maka silahkan untuk menggunakan cara ini.
Berbeda dengan kode yang digunakan untuk membagi halaman posting menjadi beberapa bagian, kode script ini menggunakan native JavaScript dan tidak perlu lagi menggunakan jQuery sehingga dengan menggunakan kode script ini tidak akan berpengaruh kepada loading blog Anda.
Cara split artikel menjadi beberapa halaman di blogger ini sama seperti menggunakan pagination yang artinya membagi beberapa halaman menggunakan nomor halaman. Hanya saja bedanya kalau ini membagi artikel atau postingan menjadi beberapa halaman.
Untuk pengguna wordpress mungkin Anda dapat menggunakan beberapa plugin seperti WP PageNavi, WP Paginate, WP Smart Pagination, dan masih banyak lagi plugin di wordpress untuk membagi halaman posting menjadi multiple page.
Perlu Anda ketahui bahwa kode script ini juga hampir sama dengan split posting yang ada pada wordpress, ketika mengklik tombol angka halaman script ini akan meload halaman tersebut, hanya saja ini digunakan pada blogspot.
2. Klik Tema > Edit HTML.
3. Cari kode
4. Copy kode javascript dibawah ini, lalu Paste di atas kode
5. Copy kode css dibawah ini, lalu Paste diatas kode
Catatan:
Kode script diatas mungkin tidak akan bekerja disemua template, perhatihan bahwa script diatas berfungsi jika pada bagian post di template Anda menggunakan kode
Perhatikan kode berikut:
1. Edit salah satu postingan blog Anda.
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode
4. Untuk membagi postingan, gunakan kode
5. Setelah selesai klik Perbarui artikel.
Source code by Gianmr
Itulah artikel mengenai cara membagi postingan blog menjadi beberapa halaman, jika Anda memiliki saran maupun pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.
Namun hal ini kembali lagi kepada Anda, jika memang perlu membagi artikel atau postingan menjadi beberapa halaman atau page merupakan suatu kebutuhan untuk blog Anda maka silahkan untuk menggunakan cara ini.
Berbeda dengan kode yang digunakan untuk membagi halaman posting menjadi beberapa bagian, kode script ini menggunakan native JavaScript dan tidak perlu lagi menggunakan jQuery sehingga dengan menggunakan kode script ini tidak akan berpengaruh kepada loading blog Anda.
Cara split artikel menjadi beberapa halaman di blogger ini sama seperti menggunakan pagination yang artinya membagi beberapa halaman menggunakan nomor halaman. Hanya saja bedanya kalau ini membagi artikel atau postingan menjadi beberapa halaman.
Untuk pengguna wordpress mungkin Anda dapat menggunakan beberapa plugin seperti WP PageNavi, WP Paginate, WP Smart Pagination, dan masih banyak lagi plugin di wordpress untuk membagi halaman posting menjadi multiple page.
Perlu Anda ketahui bahwa kode script ini juga hampir sama dengan split posting yang ada pada wordpress, ketika mengklik tombol angka halaman script ini akan meload halaman tersebut, hanya saja ini digunakan pada blogspot.
Cara Membagi Postingan Blog Menjadi Beberapa Halaman
Langsung saja bagi Anda yang ingin membagi postingan menjadi beberapa halaman di blog Anda, silahkan simak cara pemasang kodenya dibawah ini.Pasang Kode JavaScript dan CSS Untuk Membagi Postingan Blog
1. Masuk ke Blogger.com.2. Klik Tema > Edit HTML.
3. Cari kode
</body>
.4. Copy kode javascript dibawah ini, lalu Paste 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. Cari kode </style>
atau ]]></b:skin>
5. Copy kode css dibawah ini, lalu Paste diatas kode
</style>
atau ]]></b:skin>
/* Page Navigation */
.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. Lalu klik Simpan temaCatatan:
Kode script diatas mungkin tidak akan bekerja disemua template, perhatihan bahwa script diatas 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
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode
<div id="postsplit">
diawal tulisan dan tambahkan kode </div>
diakhir tulisan.4. Untuk membagi postingan, gunakan kode
<!--nextpage-->
.5. Setelah selesai klik Perbarui artikel.
Source code by Gianmr
Itulah artikel mengenai cara membagi postingan blog menjadi beberapa halaman, jika Anda memiliki saran maupun pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.
kalau nulis artikelnya di halaman bisa juga ga di split?
BalasHapusBagaimana untuk penerapan pada wordpress?
BalasHapusKalau untuk wordpress biasanya menggunakan kode ini:
Hapus<!--nextpage-->
Atau bisa menggunakan plugin post spillter
terima kasih atas tutornya,, sangat bermanfaat.. salam blogger
BalasHapuscara ini befungsi, tapi kalau bisa tampilan tombol nya di buat menarik dong atau minimal kasih kita alternatif css biar bisa ubah tampilannya,
BalasHapusBang apa bisa diterapkan diblog amp
BalasHapusSilahkan langsung di cobain aja, tapi jangan lupa untuk backup dulu templatenya sebelum melakukan perubahan.
Hapusbang, klo mau split sampai 20 halaman kenapa keluar semua angkanya? penuh banget jadinya.
BalasHapusgimana caranya buat muncul maksimal 3 angka saja, contoh: < Prev 1,2,3,...Next>
Bukan yang
:D
GAN SAYA SUDAH MASUKAN KODE NYA BERHASIL TAPI HALAMAN KE 2 TIDAK MUNCUL /UNDEFINED SOLUSINYA GAN THX
BalasHapusdari dulu sudah kuduga, kalo ini hanya untuk meningkatkan jumlah view, hanya saja baru cari tahu sekarang,
BalasHapuskarena suka gereget kalo ada blog yg satu artikel saja bisa sampe 4 halaman atau lebih,
dari dulu sudah kuduga, kalo ini hanya untuk meningkatkan jumlah view, hanya saja baru cari tahu sekarang,
BalasHapuskarena suka gereget kalo ada blog yg satu artikel saja bisa sampe 4 halaman atau lebih,
Saya coba dulu, semoga berhasil.
BalasHapusSalam kenal
Kalo ada table of content gk work, gimana ya biar work ya mas?
BalasHapusSaya coba dulu gan kodenya siapa tau berhasil
BalasHapusThanks banget tutorialnya gan, saya mau coba, semoga work ya
BalasHapusSaya sudah terapkan di Blog saya, Bisanya cuma di Dekstop, Bagaimana Jika cara ini diterapkan di smartphone
BalasHapusBagaimana Cara Menerapkan di Smartphone (Versi Responsive)
BalasHapus