Next - Prev - Blog Pager
Menampilkan judul postingan lama dan postingan baru pada link next-prev (blog pager) Blogger - tema versi 3
Di template Blogger versi ke 3 judul postingan baru dan judul postingan lama tidak bisa lagi ditampilkan meskipun menggunakan data panggil <data:...>. Meski begitu didalam template tema versi 3 defaultmarkup untuk elemen blog pager tetap disediakan. Dibawah ini screenshot default markup dari blog pager pada tema Contempo.
Dibawah ini default markup untuk link next dan prev
Sebelum melanjutkan ke pemasangan, dibawah ini menjelaskan fitur yang ada pada blog pager ini.
Fitur Blog Pager (next-prev)
Blog pager yang akan dipasang ini selain dapat menampilkan judul postingan sebelum dan judul postingan selanjutnya juga secara otomatis menampilkan link Beranda (halaman depan blog) apabila :
1. Halaman postingan yang buka merupakan postingan terakhir / paling baru (belum ada postingan lagi)
2. Halaman postingan yang dibuka adalah halaman postingan paling lama (postingan awal - halaman terakhir).
Untuk pemasangannya, ikuti langkah-langkah yang dijelaskan dibawah ini.
Menampilkan judul postingan di blog pager
Langkah pertama untuk memulai, cari dan temukan default markup seperti yang tertera diatas didalam template blog masing-masing. Langkah ini bertujuan hanya untuk memastikan lokasi penempatan kode blog pager baru yang akan ditambahkan.
Cara cepat menggunakan pencarian template.
Buka template HTML, klik dalam template dimana saja lalu tekan Ctrl + F kemudian copy saja teks berwarna hijau ini id='postpag, paste dalam kolom pencarian template lalu tekan enter
Pastikan kodenya sama persis dengan screenshot pertama diatas.
Kode HTML (default markup) blog pager
Langkah selanjutnya copy kode dibawah ini.
Kode HTML blog pager :<b:includable id='postNavigation'>
<div class='next-prev'>
<div class='newer-post'>
<span id='blog-pager-newer-link'> < Sebelumnya
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Postingan lebih baru'><data:newerPageTitle/></a>
<b:else/> 
<a expr:href='data:blog.url' expr:title='data:blog.title' rel='next'>
<div class='post-nav-inner post-nav-active'>Beranda</div>
</a>
</b:if>
</span>
</div>
<div class='older-post'>
<span id='blog-pager-older-link'> Selanjutnya >
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Postingan lebih lama'><data:olderPageTitle/></a>
<b:else/> 
<a expr:href='data:blog.url' expr:title='data:blog.title' rel='next'>
<div class='post-nav-inner post-nav-active'>Kembali ke Beranda</div>
</a>
</b:if>
</span>
</div>
</div>
</b:includable>Pastekan kode tepat diatas tag <b:includable id='postPagination'>
Menempatkan kode panggil blog pager
Istilah "kode panggil" ini bukan istilah resmi ya, ini hanya untuk mempermudah penyebutan saja untuk kode dibawah ini.
<b:include cond='data:view.isPost' name='postNavigation'/>Dalam kode panggil diatas ditambahkan atribut cond='data:view.isPost' untuk mengkondisikan tampilannya hanya dihalaman postingan saja. Tanpa atribut itu, nantinya blog pager akan muncul juga di daftar postingan halaman index.
Sebelum copy-paste kode diatas, temukan dulu lokasi penempatannya, umumnya dibagian post-footer (kaki halaman postingan).
Lakukan pencarian lagi masih sama dengan cara sebelumnya, copy teks ini untuk kata kunci pencarian template : 'post' var paste dikolom search, tekan enter.
Kodenya akan tampak seperti dibawah ini.
Pastekan kode panggil diatas tepat dibawah tag :
<b:include data='post' name='postFooter'/>
diatas tag penutup </div>, lihat screenshot:
Pada screenshot tertera name='postPagination' itu hanya sebagai contoh ya. Yang kita pastekan saat ini name='postNavigation', tapi lokasi penempatannya adalah ditempat name='postPagination' seperti discreenshot.
Script menampilkan judul postingan
Setelah itu lanjutkan memasang script untuk "memanggil" judul postingan lama dan postingan baru memakai kode dibawah ini.
Copy script lalu tempatkan diatas tag </body>
<script>//<![CDATA[
//letakkan script disini
//]]></script>"Kode ini sengaja dipisahkan karena jika disatukan, masih memberi efek pada blog pager halaman ini."
// mengecualikan root, label, pencarian dan versi mobile
if (/.+\.html(\?m=0)?$/.test(location.href)) {
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if (olderLink) {
getPageTitle(olderLink, setOlderPageTitle);
function setOlderPageTitle(data){
setPageTitle(data, olderLink, '', '  ')
};
}
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if (newerLink) {
getPageTitle(newerLink, setNewerPageTitle);
function setNewerPageTitle(data){
setPageTitle(data, newerLink, '  ', '')
};
}
// mengatur judul halaman dari data feed
function setPageTitle(data, pageLink, prefix, suffix) {
if (data.feed.entry) {
if (data.feed.entry.length > 0) {
var title = data.feed.entry[0].title.$t;
}
}
if (title) {
pageLink.innerHTML = prefix + title + suffix;
}
}
// mengambil entri data dari feed
function getPageTitle(pageLink, callback) {
var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
var script = document.createElement('script');
script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
document.body.appendChild(script);
}
}Kode CSS blog pager
Langkah terakhir adalah memberi gaya tampilan pada blog-pager (next-prev) yang barusan ditambahkan.
Copy kode CSS dibawah ini, tempatkan didalam tag <b:skin>
.next-prev {
width: 100%;
display: flex;
flex-wrap: nowrap;
gap: 5px;
justify-content: space-between;
padding: 5px 0;
margin: 10px 0;
border-top: 1px dotted #ddd;
border-bottom: 1px dotted #ddd;
}
.next-prev > div {
width: calc(100% / 2 - 10px);
padding: 5px;
}
.next-prev .newer-post {text-align: left;}
.next-prev .older-post {text-align: right;}
.next-prev > div a {display:block; font: normal 800 16px Arial,sans-serif;}