Cara Mengganti Tulisan Older Post & Newer Post dengan Judul Postingan

Cara Mengganti Older/Newer Post dengan Judul Postingan Blog. Secara default, menu navigasi halaman blogger yang ada di bagian bawah halaman depan atau halaman postingan biasanya berupa link dengan anchor text older post, newer post, dan home. Kita bisa mengubahnya dengan judul postingan sehingga membuat struktur navigasi menjadi lebih baik. Mengganti tulisan tersebut menjadi judul postingan tentunya akan lebih SEO dan user friendly. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya.

Berikut ini cara mengganti next post dan older post dengan judul posting atau judul tulisan di halaman dalam postingan Blogger, khususnya untuk template bawaan Blogger.

1. Buka blogger.com
2. Lalu klik Tema => Edit HTML
3. Kemudian pastikan template blog yang digunakan sudah dilengkapi dengan Jquery agar script bisa berkerja dengan baik.
• Untuk mengetahuinya cari url untuk memanggil fungsi-fungsi Jquery di bawah ini apakah sudah ada atau belum:

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

• Kalau belum ada, tambahkan dulu syntax untuk menggunakan jQuery di bawah ini dan letakkan di atas tag </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

4. Cari syntax berikut ini dan hapus.

        <!-- navigation -->
        <b:include name='nextprev'/>

5. Kemudian ganti dengan kode berikut ini:

        <b:include name='nextprevwithtitle'/>

6. Lalu tambahkan baris syntax berikut tepat di atas syntax </b:widget>

 <b:includable id='nextprevwithtitle'>
<b:if cond='data:newerPageUrl OR data:olderPageUrl'>
<ul class='pager'>
<b:if cond='data:newerPageUrl'>
<li class='next'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'>
<data:newerPageTitle/>
</a>
</li>
</b:if>
<b:if cond='data:olderPageUrl'>
<li class='previous'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'>
<data:olderPageTitle/>
</a>
</li>
</b:if>
</ul>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink + " .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
</b:if>
</b:includable>

7. Simpan Template, dan lihat hasilnya!

Demikian Cara Mengganti Older/Newer Post dengan Judul Postingan Blog. selamat mencoba!

Posted by Andi Setiawan

Published on August 03, 2019

Edit This

Categorized in Blogger, Blogging, Blogspot, Hacking, JQuery, Pagination