Cara Mengatasi Tampilnya Halaman Versi Web Ketika Daftar Artikel Terkait Versi Mobile Dibuka Dengan Menggunakan Desktop Browser

Sobat, seperti yang kita tahu bahwasanya setelah Blogger mengijinkan penggunanya untuk melakukan kustomisasi template versi seluler dengan memberikan pilihan setelan ‘Custom / Tersesuai’ untuk tampilan halaman blog versi mobile, maka akhirnya kita pun dapat dengan leluasa melakukan modifikasi pada template untuk mendapatkan desain halaman versi seluler yang sesuai dengan keinginan dan kreatifitas kita masing-masing. Dimana keleluasaan yang kita dapatkan untuk melakukan kustomisasi tersebut secara prinsip hampir sama atau serupa dengan keleluasaan yang kita dapatkan untuk melakukan modifikasi tampilan halaman blog versi web (dalam hal ini termasuk diantaranya adalah keleluasaan dalam penentuan desain, pemasangan widget, pembuatan daftar artikel terkait versi seluler, dan lain sebagainya).

Dan kemudian seperti yang kita tahu pula bahwasanya dengan adanya fasilitas untuk pilihan tampilan halaman versi seluler, maka apabila setelan untuk pilihan tersebut diaktifkan, ketika blog dibuka dengan memakai perangkat mobile secara otomatis halaman yang ditayangkan pun merupakan halaman versi seluler sesuai dengan pilihan tampilan yang sebelumnya telah dipilih.

Namun demikian ketika kita ingin membuka halaman blog versi seluler, sebenarnya tidaklah harus dilakukan dengan memakai browser yang terdapat pada perangkat mobile. Akan tetapi untuk keperluan ini kita dapat pula melakukannya dengan menggunakan browser yang terdapat pada komputer, dalam hal ini adalah dengan cara menambahkan ?m=1 di belakang URL yang ingin dibuka. Dengan demikian maka akan sangat memudahkan kita dalam membuka halaman yang dimaksud, terutama jika sambungan internet yang dipakai tidak cukup tinggi. Hal ini disebabkan karena dengan cara membuka halaman versi seluler maka penayangan halaman akan lebih cepat bila dibandingkan dengan membuka halaman versi web.

Akan tetapi yang menjadi masalah sekarang adalah, setelah kita membuka blog dalam tayangan versi mobile terkadang tautan atau daftar artikel yang kita klik ‘larinya’ selalu ditampilkan kembali dalam tayangan versi web (sebagai contoh misalnya adalah tautan yang terdapat dalam daftar artikel terkait). Hal ini disebabkan karena penggunaan Java Script yang sama untuk membuat daftar artikel terkait versi web dan versi seluler, sehingga akhirnya URL yang dihasilkan pun akan sama. Sebagai contoh misalnya adalah daftar artikel terkait yang dihasilkan oleh Java Script yang dipakai pada Blog Mas Sugeng untuk tampilan halaman versi seluler seperti yang tampak pada gambar di bawah ini.

Sumber gambar: http://www.mas-sugeng.com/?m=1

Nah, apabila bagian gambar yang ditandai dengan tanda anak panah tersebut dibandingkan dengan gambar yang pertama di atas, maka Anda akan mendapati adanya sebuah perbedaan yaitu tidak adanya string ?m=1 di belakang URL untuk gambar yang kedua. Yang artinya URL dengan format demikian merupakan URL untuk tampilan halaman versi web, sehingga apabila tautan untuk URL diklik maka secara otomatis artikel pun akan terbuka dalam tayangan versi web. Lantas bila yang kita dapati adalah demikian, maka apakah kita harus selalu menambahkan ?m=1 secara manual di belakang URL yang ingin dibuka ketika akan menampilkan artikel dalam tayangan versi mobile? Tentunya sangat merepotkan bukan?

Oke, seperti yang telah saya uraikan di atas karena daftar artikel terkait yang umumnya dipasang pada sebuah blog biasanya adalah dihasilkan oleh penggunaan Java Script tertentu, maka untuk menghasilkan daftar artikel terkait versi seluler yang tepat perlu dilakukan memodifikasi pada Java Script yang dipakai sehingga akhirnya URL yang dihasilkan pun merupakan URL untuk tautan versi seluler. Dengan demikian maka akhirnya ketika sebuah tautan pada tampilan versi seluler diklik, tautan tersebut tetap akan terbuka pada tampilan versi seluler dan tidak malah ‘lari’ ke tayangan versi web.

Dan karena bervariasinya Java Script yang dipakai, maka di sini saya hanya akan mencontohkan 2 (dua) buah script saja, yaitu script yang saya gunakan dalam tutorial sebelumnya (dalam hal ini adalah script yang terdapat pada langkah kelima cara mengedit template untuk mengubah tema tampilan blog versi seluler) dan script yang dipakai dalam template Mas Sugeng. Hal ini sekaligus guna memberikan jawaban atas pertanyaan Sobat Blogger kepada saya terkait dengan masalah tersebut di atas yang kebetulan menggunakan template dari Mas Sugeng.

Pertama, untuk script yang digunakan pada template versi seluler Eltelu.
Jika sebelum ini Anda telah mengedit template untuk tampilan versi mobile dengan mengacu pada artikel tersebut di atas, maka agar URL yang dihasilkan untuk tautan daftar artikel terkait secara otomatis menjadi URL untuk tautan versi seluler, silakan edit ulang template yang Anda gunakan dan kemudian cari kode posturl = entry.link[k].href; lalu ganti dengan posturl = entry.link[k].href + '?m=1';

Kedua, untuk script yang digunakan pada template versi seluler Mas Sugeng.
Jika Anda adalah pengguna template dari Mas Sugeng, maka agar URL yang dihasilkan untuk tautan daftar artikel terkait secara otomatis menjadi URL untuk tautan versi seluler, silakan edit ulang template yang Anda gunakan dan kemudian cari kode <li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li> lalu ganti dengan <li><a href="'+relatedUrls[r]+'?m=1">'+relatedTitles[r]+'</a></li>

Jadi, prinsip dari modifikasi script tersebut adalah dengan menambahkan ?m=1 secara langsung di dalamnya, sehingga di belakang URL artikel terkait yang dihasilkan pun akan langsung terdapat string ?=m1 yang artinya URL dengan format seperti ini merupakan URL untuk tautan halaman versi seluler.

Oh ya, perlu diketahui bahwasanya ulasan dan kutipan script serta screenshot halaman dari Blog Mas Sugeng dalam artikel ini telah mendapatkan ijin dan atau persetujuan dari beliau. Dan sebagai bukti dari ijin dan atau persetujuan tersebut adalah sebagaimana yang tampak pada screenshot percakapan Facebook antara saya dengan Mas Sugeng di bawah ini.

Sumber gambar: m.facebook.com

Semoga berguna serta bermanfaat. Dan apabila Anda mengalami kesulitan atau kendala dalam mengimplementasikan teknik yang diuraikan dalam artikel ini, maka silakan mengajukan pertanyaan terkait dengan kesulitan atau kendala yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.
Salam.