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.

Blogger (15)
Disqus

15 komentar

Tulis Komentar

baru saja saya pulang dari blog yang membahas soal mengganti nez - prev. nah disinimendapat suguhan tidakpentingnya mengganti navigasi nex-prev nya diganti, jadi bingung sendirian ajah saya teh deh

Balas

tak perlu bingung kang hehe, disesuaikan saja dengan kondisi blognya. Kalo di blognya artikelnya pake banyak gambar sebaiknya nextprev default gak usah diganti...

Balas

udah nggak bingung lagi setelah tak pegang jempol mang admi...nih...nih...nih

Balas

Wah sepertinya ini menarik sekali untuk di pelajari dan di pahami dulu :D

Balas

:) silahkan dipelajari mas

Balas

Sekarangmah gak pengen komen kang,,, Sayamah maunya follow dulu blog ini biar gak kehilangan info info kayak gini kang.. salam kenal kang :D

Balas

hehe salam kenal juga kang,, ta' polllow balik ya :)

Balas

Si mamamng yang satu ini masih suka sama yang oprekan euy.... malah tambah keren..... tutorialnya.

Balas

setelah aku cek ternyata benar,, halaman lain yg ada di blog pager ikutan diload semua elemennya :3

Balas

jangan cuma dipegang mang, tapi di hisap biiar maknyooss..

Balas

hanya orang yang sabar yang bisa melakukan utak atik html seperti ini, kalo saya mah ga sabaran kang, jadinya nyari yang simpel2 ajah, h h h...

Balas

Kalau saya ngikut sama yang bikin template aja, karena saya gak ngerti edit template. Takut jadi error.

Balas

iyah...tapi nggak ganti-ganti...bosen...tauuuuu


#kompor mledug, supaya ganti artikel

Balas

Sama seperti kang haris, berhubung saya mah gak mudeng sama utak atik template jadi saya mah ngikutin yang bikin template aja kang...

Balas

Ternyata begitu mas ya....

Balas