Mobil Nissan Grand Livina Matik Ngempos, Mungkin Ini Penyebab Dan Solusinya

• Navigasi Next-Prev Blogger Yang Aneh
• Merubah Posisi Navigasi Next-Prev
• Mengganti Navigasi Next-Prev Dengan Judul Artikel/Post Tanpa jQuery
• Penutup

Navigasi Next Prev Blogger Yang Aneh

Sebenarnya saya buka akun blogger sudah sedari tahun 2009, namun karena saat itu theme bawaan blogger yang masih cupu dan juga template theme gratisan pihak ketiga yang juga masih terlihat kaku maka saya ahirnya memilih toko sebelah untuk personal blog dan membiarkan akun blogger ini tak tersentuh. Sampai ahirnya sekitar 1,5 bulan lalu saya mulai window-shopping theme gratisan buatan developer Indonesia dan juga luar negeri untuk personal blog saya yang satu ini.

Walaupun pilihan theme gratis buatan developer Indonesia banyak yang keren, namun bukan berarti saya gak punya kriteria saat memilihnya (pakai yang gratisan ajah somboong hehehe). Aspek tampilan yang keceh halilintar, navigasi yang gak ribet dan kecepatan loading adalah beberapa kriteria yang saya terapkan. Hingga ahirnya saya memilih theme Fiksioner v3 versi gratisan buatan Igniel yang baru saja dirilis pada awal September 2020.

Sebetulnya di hati kecil saya masih belum sreg terhadap 2 masalah yang ada pada theme ini pada khususnya dan juga hampir sebagian besar theme blogger yang ada di pasaran pada umumnya. Masalah klasik ini sepertinya pure bahwaan blogger yakni pada navigasi di halaman artikel/post.

Masalah pertama, perhatikan dech gambar di bawah. Link navigasi yang menunjuk ke artikel berikutnya yang tertulis dengan 'LEBIH BARU', atau 'NEXT', ataupun 'NEWER POST' (tergantung theme dan settingan bahasa yang digunakan) berada di sisi kiri, sedangkan link navigasi yang akan membawa pembaca ke artikel sebelumnya tertulis dengan 'LEBIH LAMA' atau 'PREV' ataupun 'OLDER POST' (tergantung theme dan settingan bahasa yang digunakan) justru berada di sisi kanan.

Kelihatannya hal tersebut sangat sepele, namun yang terjadi adalah saat kita akan memilih artikel yang lebih baru secara reflek otak kita akan menyuruh tangan memilih link yang di sebelah kanan padahal link yang dimaksud berada di sebelah kiri hihihihi.

Sekarang kita lihat masalah kedua, lihat kembali gambar di atas. Walaupun kadar 'menyebalkannya' tidak sebesar masalah pertama namun sebagian pemilik/pengelola situs beranggapan bahwa seharusnya navigasi yang menunjukkan link ke artikel yang lebih baru bukan hanya sekedar tertulis dengan 'LEBIH BARU' tapi tertulis lengkap sekalian dengan judul artikelnya. Hal ini menurut mereka ada kaitannya dengan potensi akan menurunnya nilai UX (User Experience) sehingga dikhawatirkan bisa membuat bounce-rate dari tamu yang datang ke situs menjadi tinggi.

Definisi 'bounce rate' secara sederhana adalah banyaknya sesi 1 halaman saja (masuk lalu keluar) dibagi dengan semua sesi kunjungan pembaca.

Misalnya dalam 1 hari situs ini hanya anda seorang pengunjungnya dan anda datang langsung datang ke artikel ini, membacanya kemudian keluar dari situs ini, maka bounce rate halaman/artikel ini = 100%

Namun jika ada seorang pembaca lain yang juga datang langsung ke artikel ini, lalu membaca artikel lain (misal artikel X) baru kemudian keluar dari situs maka bounce rate halaman/artikel ini menjadi 50%, sedangkan bounce rate artikel X adalah 0% karena artikel X bukanlah artikel pertama yang dia baca di situs ini.

Kalau untuk browser versi handphone mungkin saya akan agak setuju pendapat tersebut, tapi kalau untuk browser versi komputer desktop/laptop saya kurang begitu setuju dengan pendapat di atas.

Sejauh yang saya pernah lihat, semua thema blogger selalu menampilkan apakah itu Related Post atau mungkin juga Random Post pada bagian bawah setiap halaman yang berisi artikel. Belum lagi kalau theme tersebut juga menampilkan beberapa Related post di tengah artikel dan juga Populer Post pada sisi samping. Itu artinya sudah cukup banyak pilihan artikel bagi pembaca untuk tetap berlama-lama main di situs tersebut. Itupun dengan catatan jika memang isi situs tersebut menarik baginya.

Toh lagi pula bagi pengguna browser di desktop/laptop link URL artikel kan masih akan tampil dan terlihat di sisi kiri bawah layar di atas taskbar walaupun navigasi Prev-Next dibuat tanpa judul artikel/post. Meskipun yang tampil hanya URL-nya, tapi hampir bisa dipastikan URL tersebut akan sama dengan judul artikel.

Saya pribadi kalau sedang membaca situs milik orang lain, jika saya tertarik dengan artikel yang sedang saya baca, anggap saja artikel tersebut sedang membahas tentang aktivitas liburan di sebuah pantai yang keren, maka jika saya tertarik dengan topik liburan di pantai dan masih ingin meneruskan menghabiskan waktu di situs tersebut maka saya lebih sering membuka artikel lain dengan label yang sama atau related post, bahkan sebelum saya tiba pada bagian ahir artikel yang sedang saya baca. Sangat jarang saya memilih link artikel sesudah ataupun artikel sebelumnya karena belum tentu artikel tersebut mempunyai topik yang sama dengan topik liburan.

Anyway karena pengguna browser di handphone saya pikir memang perlu melihat, gak ada salahnya juga sih kalau kita ganti navigasi Prev-Next dengan judul artikel/post, Inshaa Allah nanti akan kita bahas di bagian heading ke-3.

Masalah #1, Merubah Posisi Navigasi Next-Prev

Saat saya browsing mencari solusi untuk masalah pertama, semua tutorial yang saya temukan kurang lebih selalu menyarankan hal berikut :

1. Login ke Blogger > Themes > Edit HTML > loncat ke Widget > Blog 1
2. Cari baris seperti ini :  <b:includable id="nextprev">, atau <b:includable id="nav-post"> ataupun <b:includable id="postPagination"> (tergantung dari theme yang digunakan)
3. Kemudian lihat nama class yang mengapit <data:newerPageTitle> dan <data:olderPageTitle>  
4. Lalu diatas bagian ]]> tambahkan property css float:right pada class terdekat dengan <data:newerPageTitle> dan float:left untuk class terdekat dengan <data:olderPageTitle>
5. Secara text-book, properety css 'float' fungsinya memang bisa untuk memindahkan elemen tulisan beserta link 'LEBIH BARU' dari sebelah kiri ke sebelah kanan dan memindahkan elemen tulisan beserta link 'LEBIH LAMA' dari sebelah kanan ke sebelah kiri

Saat mencobanya di theme ini beberapa kali hasilnya tetap nihil, saya gak tahu kenapa. Apakah mungkin blogger sudah 'memantek' mati elemen tulisan 'LEBIH BARU' dan 'LEBIH LAMA' tersebut? Saya juga gak tahu jawabannya .. lha wong saya juga cuma tahu sedikit banget dasar-dasar dunia per-script-an, HTML dan CSS.

Namun yang pasti saya pernah mencoba beberapa theme yang sudah bisa merubah posisi navigasi tersebut ke lokasi yang benar.

Baca Juga : Wisata Tokyo Dan Sekitarnya Yang Terkenal, Ngehits Dan Cantik

Sampai ahirnya saya memutuskan untuk mencoba cara 'bodoh-bodohan', yakni merubah urutan penulisan kodenya. Kalau kita perhatikan alur penulisan kode HTML dari theme selalu mendahulukan kondisi if dari 'data:newerPageUrl' sebelum kondisi if dari 'data:olderPageUrl'. Kenapa gak kita rubah aja urutannya :-) Perhatikan screenshot baris kode theme di bawah ini :

Baris kode yang saya beri warna kotak kuning adalah yang mengatur adanya navigasi tulisan 'LEBIH BARU' sedangkan baris kode yang saya beri warna kotak ungu kemerahan adalah yang mengatur adanya navigasi tulisan 'LEBIH LAMA'.

Cara 'bodoh-bodohan' yang saya maksud adalah dengan menukar posisi isi 2 kotak tersebut menjadi seperti gambar di bawah. Tapi man-teman kalau mau coba cara ini jangan lupa untuk backup dulu ya themenya : Login ke Blogger > Theme > Backup

Oh ya, satu hal lagi, pada kode script asli Fiksioner v3 tertulis seperti ini :

<b:if cond='!data:newerPageUrl'>

<span class='nolink newest'><data:messages.newest/></span>

  </b:if>

Mungkin lebih tepat jika class span-nya cukup ditulis nolink saja agar cocok dengan property css yang ada sehingga bisa tampil keterangan saat kita membuka atau berada pada artikel paling baru.

Berikut screenshot setelah saya melakukan perubahan urutan penulisan baris kode tersebut, asyeeeek ... berhasil tuh kalau di tempat saya. Untuk cross check saya juga sudah periksa halaman depan, halaman hasil 'search' dan juga halaman search label di mana seharusnya navigasi 'LEBIH LAMA' dan 'LEBIH BARU' tidak boleh tampil di sana.

Untuk live demo silahkan langsung coba di blog sini aja ya. Artikel terahir bisa dilihat di beranda halaman depan. Sedangkan artikel terlama adalah artikel yang ini.

Masalah #2, Mengganti Navigasi Next-Prev Dengan Judul Post/Artikel Tanpa jQuery

Kalau kita googling solusi yang ditawarkan untuk masalah ini bejibun banget dari para blogger di dalam dan luar negeri. Namun sayangnya nyaris semua mengharuskan kita menggunakan 'AJAX' dengan memasang library jQuery misalnya dengan manambahkan baris seperti ini di bawah <head> :.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

Untuk para pemilik ataupun pengelola situs yang sangat memperhatikan performance loading speed situsnya pasti faham saat kita melakukan test kecepatan baik itu di GTMetrix, Google PageSpeed Insight ataupun situs lain yang sejenis, nilai yang didapat akan turun lumayan jauh jika kita menggunakan (memanggil) script dari pihak ketiga, termasuk si jQuery ini. Saya pernah test nilainya bisa turun 30%-40% lho gegara menggunakan si tante jQ ini.

Biasakan untuk selalu melakukan Backup theme setiap kali hendak melakukan perubahan pada file HTML theme

Naaaah saat sedang mencari solusi untuk masalah untuk mengganti navigasi Next-Prev dengan judul post/artikel tanpa menggunakan jQuery ini, sampailah saya ke blog nkurilog.blogspot.com. Di sana dia sedang mencoba-coba API-nya blogger untuk me-load konten suatu artikel tertentu. Berikut solusi untuk masalah kedua yang dia tawarkan. Langkah-langkahnya seperti ini, semoga bisa dipahami.

• Sebelum mencoba cara ini jangan lupa untuk selalu backup dulu ya man-teman; Login ke Blogger > Theme > Backup
• Pilih Theme > Edit HTML
• Copy script berikut dan latakan di atas </body>

<script type='text/javascript'>

//<![CDATA[

// except root, labels, search and mobile pages

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, '', ' &#187;')

};

}

var newerLink = document.getElementById('Blog1_blog-pager-newer-link');

if (newerLink) {

getPageTitle(newerLink, setNewerPageTitle);

function setNewerPageTitle(data){

setPageTitle(data, newerLink, '&#171; ', '')

};

}

// set the page title from feed data

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;

}

}

// get entry data from the 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);

}

}

//]]>

</script>

• Cari baris seperti ini :  <b:includable id="nextprev">, atau <b:includable id="nav-post"> ataupun <b:includable id="postPagination"> (tergantung dari theme yang digunakan)
• Pastikan expr id harus ditulis dengan format seperti ini expr:id='data:widget.instanceId + "_blog-pager-older-link"' pada class 'blog-pager-older-link' yang man-teman gunakan 
• Pastikan juga expr id harus ditulis dengan format seperti ini expr:id='data:widget.instanceId + "_blog-pager-newer-link"' pada class 'blog-pager-newer-link' yang man-teman gunakan
• Pastikan ada baris <data:newerPageTitle> terapit kondisi If <b:if cond='data:newerPageUrl'> dan juga ada baris <data:olderPageTitle>> di dalam kondisi If <b:if cond='data:olderPageUrl'>
• Jadi kalau di fiksioner v3 hasil modifikasi bagian includable id postPagination kurang lebih akan seperti ini :

<b:includable id='postPagination'>

          <b:if cond='!data:view.isError'>

                <div class='blog-pager' id='blog-pager'>

                <b:class cond='!data:view.isSingleItem and !data:view.isLabelSearch and !data:blog.searchQuery and !data:view.isArchive' name='numbering'/>

                  <b:if cond='data:olderPageUrl'>

                    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>

                    <data:olderPageTitle/> 

                    </a>

                  </b:if>

                  <b:if cond='!data:newerPageUrl'>

                    <span class='nolink newest'><data:messages.newest/></span>

                  </b:if>

                  <b:if cond='data:view.url != data:blog.homepageUrl and !data:view.isPost'>

                    <a class='home' expr:href='data:blog.homepageUrl' expr:title='data:messages.home'>

                      <data:messages.home/>

                    </a>

                  </b:if>

                  <b:if cond='!data:olderPageUrl'>

                    <span class='nolink'><data:messages.oldest/></span>

                  </b:if>

                  <b:if cond='data:newerPageUrl'>

                    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>

                    <data:newerPageTitle/>

                    </a>

                  </b:if>

                  </div>

              </b:if>

            </b:includable>

• Simpan perubahan

Kalau di tempat saya sih berhasil menampilkan judul artikel/post sebagai pengganti 'LEBIH LAMA' dan 'LEBIH BARU' seperti ini

Kalau sudah berhasil seperti ini maka man-teman tinggal kasih bedak dan lipstik melalui css agar tampilan navigasinya lebih menarik. Bisa dikasih gambar icon sgv tanda panah kek, di kasih tambahan tulisan 'Artikel Sebelum' dan 'Artikel Sesudah' kek, mau pakai hurup besar semua kek, mau pake huruf kecil semua kek, atau mau capitalize kek .. terserah man-teman aja.

Untuk live demo silahkan dilihat di blog ini aja ya. Artikel terahir bisa dicek di beranda depan, sedangkan artikel terlawas bisa dilihat disini.

Catatan :

1. Masih terlihat adanya 2 tanda anak panah kecil di samping judul artikel. Dugaan sotoy saya itu sih memang blogger sengaja pasang sebagai cadangan navigasi bagi programer yang menggunakan jquery dan atau tehnik lain namun gagal melakukan pemanggilan objek judul artikel, cmiiw
2. Jangan lupa coba-coba rubah nilai ?m=0 menjadi ?m=1 jika ada masalah saat mencobanya di browser handphone

Penutup

Setelah 2 masalah ini beres gak lupa saya cek ulang performa loading blog dengan GTMetrix karena khawatir proses ngobrol-nya script milik blogger nkurilog.blogspot.com tadi dengan API-ya blogger ada efek sampingnya.

So far sih hasilnya masih baik-baik saja ... gak jelek-jelek bingits :-) Bahkan kalau dilihat dari porsi nilai pagespeed yang tidak berubah maka bisa dibilang tambahan script tersebut sama sekali gak mempengaruhi kecepatan proses loading.

Demikianlah opini recehan saya terhadap pendapat umum tentang perlu atau tidaknya mengganti navigasi Prev'-'Next' ataupun 'Lebih Lama'-'Lebih Baru' dengan judul artikel/post dan juga beserta solusi jika memang dirasakan perlu untuk mengganti navigasi Prev-Next tersebut dengan judul artikel/post tanpa menggunakan jQuery yang memberatkan proses loading.

Cheers,
Mantel