Next dan Previous atau Older dan Newer dapat diartikan link yang letaknya berada dibawah postingan yang jika di-klik akan mengarah pada halaman "Sebelumnya" atau "Selanjutnya" dari artikel tersebut. Tujuannya agar pengunjung lebih mudah untuk menavigasi postingan tanpa harus repot ke beranda untuk melakukannya.
Untuk Template jenis lama biasanya akan otomatis disertai dengan link dari judul postingan "sebelum/sesudah" itu. Namun sayangnya di Template jenis baru ini semisal Contempo, Notable, Esential, judulnya tidak muncul. Contohnya bisa dilihat pada gambar yang ditunjukkan panah diatas atau dapat juga dilihat diakhir postingan ini.
Cara Membuatnya:
* Ke Halaman Tema.
* Tap Button Orange (panah kebawah) lalu pilih Edit HTML.
1. Salin Css berikut dan pasang ke bagian <b:skin> dalam Template Blogger anda.
.older-newer{
margin:0;
display:flex;
justify-content:space-between
}
.older-newer .old,.older-newer .new,.older-newer .old a,.older-newer .new a,.older-newer .home a{
font-weight:600
}
.older-newer .home,.older-newer .home a{
flex:1
}
2. Salin Script Kode berikut dan pasang ke dalam Template Blogger Anda. (Lihat gambar dibawah yang diberi tanda panah).
<b:includable id='postOlderNewer'>
<b:if cond='data:view.isPost and data:view.isSingleItem'>
<div class='older-newer'>
<span class='new'>
<b:if cond='data:newerPageUrl'>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' rel='newer'>&#10094; NEWER</a>
<b:else/>
&#10094; NEWER
</b:if>
</span>
<span class='home'/>
<span class='old'>
<b:if cond='data:olderPageUrl'>
<a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle' rel='older'>OLDER &#10095;</a>
<b:else/>
OLDER &#10095;
</b:if>
</span>
</div>
</b:if>
</b:includable>
Salin ini <b:include name='postOlderNewer'/> dan pasang di dalam <b:includable id='postFooter' var='post'> seperti gambar berikut.
Script ini hanya baru saya coba pada Template Contempo dan Essential saja, kalau untuk Template Notable jika kode tidak bekerja mungkin harus menambahkan JQuery berikut diatas <body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
Comments
Post a Comment
Jika ada hal yang kurang jelas, misalnya tips dan trik yang tidak berfungsi, ulasan yang sudah usang, meski mengetahui ada ulasan yang memerlukan pembaruan terkadang kami malas untuk memperbaruinya, jadi silakan tanyakan saja melalui kolom komentar dan akan kita bahas bersama. Regards!