-->

Alasan mengapa tidak perlu mengganti navigasi next-prev menjadi judul artikel

Sesuai dengan judul di atas "Alasan Mengapa Tak Perlu Mengganti Navigasi Next-Prev Menjadi Judul Artikel" saya akan memaparkan alasan yang membuat kalian berpikir dua kali... dua sama dengan empat, suka sama suka ayo merapat untuk mengganti navigasi nextprev yang umumnya muncul dengan tulisan dalam bahasa Inggris older post - newer post atau posting lama - posting lebih baru jika format bahasa yang digunakan adalah bahasa Indonesia...

Apa sih sebenarnya navigasi nextprev itu? nextprev adalah navigasi yang menyediakan kita link menuju ke halaman artikel yang diposting sebelum halaman yang saat ini dibaca (current) dan ke halaman artikel yang lebih baru. Pada template default blogger, di halaman item next-prev tereletak diatas kolom footer/di bawah kolom komentar yang membuatnya terasa percuma dipasang jika pada halaman tersebut banyak komentar. Namun untuk template modif fungsi ini dioptimalkan dengan meletakkannya di atas kolom komentar, di akhir artikel.

Optimasi lain yang banyak dilakukan untuk navigasi ini adalah dengan mengganti tulisan defaultnya menjadi judul artikel. Cara yang yang digunakan untuk mengganti tulisan older post - newer post ini yaitu dengan menggunakan javascript, sebagai contoh javascript yang saya ambil dari kompiajaib

<script type="text/javascript">
//<![CDATA[
(function($){
var newerLink = $('a.blog-pager-newer-link');
var olderLink = $('a.blog-pager-older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html($(data).find('.post h1.post-title').text());},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html($(data2).find('.post h1.post-title').text());},"html");
})(jQuery);
//]]>
</script>

atau mungkin yang mirip seperti ini:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var e=$("a.blog-pager-newer-link").attr("href");$("a.blog-pager-newer-link").load(e+" .post-title:first",function(){
var e=$("a.blog-pager-newer-link").text();$("a.blog-pager-newer-link")});
var t=$("a.blog-pager-older-link").attr("href");$("a.blog-pager-older-link").load(t+" .post-title:first",function(){
var e=$("a.blog-pager-older-link").text();$("a.blog-pager-older-link")})});
//]]>
</script>

Apakah perlu mengganti tulisan next-prev ini dengan judul postingan?
Kalau melihat after effect-nya (bukan produk adobe!) navigasi next-prev yang sebelumnya hanya berupa tulisan older post - newer post menjadi judul artikel membuatnya lebih jelas dalam memberikan sugesti kepada pembaca apa yang akan ia baca selanjutnya. Hal ini tentu saja membuat fungsi navigasi next-prev menjadi penting.

Riset saya lakukan dengan menggunakan browser dewa andalan saya, Mozilla Firefox 45.0.1 memanfaatkan fitur developer inspectornya. Saya kemudian meload salah satu artikel di blog in dan pada tab network di inspector untuk melihat apa-apa saja yang direquest oleh browser dan jreng-jreng.. hasilnya cukup mengejutkan. Ternyata penggunaan script seperti di atas tidak hanya mengambil judul artikel.

Pada tab html di inspector, link #Berburu pulsa... dan  #Mengubah foto... yang berstatus older post dan newer post juga diload, pada tab image semua gambar yang ada pada kedua halaman tersebut ternyata juga diload.



Saya misalkan jika halaman artikel yang saya buka memiliki 10 gambar di dalamnya, sedangkan pada link older post memiliki 10 gambar juga dan link newer post juga memiliki 10 gambar maka total gambar yang akan diload mencapai 30 gambar. Efeknya tentu saja pada loading yang berat dan lama, dan bahkan dalam kasus saya browser menjadi hang hang hang.

Coba perhatikan ilustrasi yang saya buat berikut ini:


Kesimpulannya, mengganti nama older - newer post pada navigasi nextprev dengan judul artikel menggunakan javascript di atas menyebabkan terpanggilnya halaman older-newer post beserta kontennya sekaligus, mulai dari html, inline Js dan Css (jika ada), image, video, flash dan kawan-kawannya.

Note:
  • Pengujian saya lakukan dengan menggunakan Mozilla Firefox 45.0.1 dan Google Chrome 49... untuk browser lain saya belum coba tapi sepertinya sama saja.
  • Javascript yang saya gunakan ada 3, dua di antaranya adalah yang saya cantumkan di atas, sedangkan yang satunya lupa saya save hehe.