Harap Tunggu Proses Memuat Konten Halaman

Facebook Twitter YouTube

18
Tgl: 25 Januari 2013

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 ku... http://lh6.ggpht.com/-dKOs4guGcvU/UQF8JFmEcBI/AAAAAAAABE0/4XRGacIHqyo/s72-c/Daftar-Artikel-Terkait-Versi-Seluler%25255B2%25255D.jpg?imgmax=800

Daftar Artikel Terkait Versi Seluler Eltelu
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.
Daftar Artikel Terkait Versi Mobile Mas Sugeng
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.
Screenshot Perbincangan Melalui Pesan Facebook Dengan Mas Sugeng
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.


Diterbitkan Oleh: Pada Pukul 01.26
Baca Pula Artikel Terkait Dalam Kategori: , , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Harap menyertakan http://eltelu.blogspot.com/2013/01/cara-mengatasi-tampilnya-halaman-versi.html dan atau mencantumkan tautan untuk artikel ini bila Anda menyalin sebagian dan atau keseluruhan isinya. Terimakasih.
Terdapat 18 komentar untuk artikel ELTELU - SEMAR BINGUNG'S WEBLOG yang berjudul Cara Mengatasi Tampilnya Halaman Versi Web Ketika Daftar Artikel Terkait Versi Mobile Dibuka Dengan Menggunakan Desktop Browser .
25/01/13 08.17 O

makasih sob infonya, terus klo untuk merubah url yang ada dipostingan bisa ga...

25/01/13 09.39 O

@Ijang CahyanaSama-sama Sobat.

Dan kemudian terkait dengan mengubah url yang ada di dalam postingan, jujur saja saya juga belum pernah mencobanya.

Akan tetapi menurut saya tidak tertutup kemungkinan bila hal tersebut dapat dilakukan.

25/01/13 12.34 O

ini termasuk ilmu baru buat saya mas, masih fresh tutorialnya

terima kasih yaaa uda berbagi
:D

25/01/13 13.13 O

terima kasih gan udah di buat artikelnya, dan sudah berhasil di blog saya, topppp

25/01/13 15.51 O

@andieshinigamiSama-sama Sobat. :)

25/01/13 15.52 O

@Indahnya BerbagiSama-sama Sob. Syukurlah bila Sobat telah berhasil menerapkannya pada blog yang Sobat kelola. :)

15/03/13 09.30 O

Bisa pesen custom template mobile ga mas admin ??

Please segera sms saya.

*Premium.

089694143605 (sms)

20/03/13 15.37 O

@AdministratorSobat, sebelumnya mohon maaf bila ada keterlambatan saya dalam memberikan balasan, sekaligus mohon maaf bila akhirnya saya belum dapat memenuhi permintaan tersebut.

Perlu diketahui bahwasanya beberapa waktu lalu saya memang mencoba untuk membuka jasa kustomisasi template mobile. Namun karena saat ini terbentur dengan kesibukan pekerjaan kantor, akhirnya hal tersebut terpaksa saya tangguhkan terlebih dulu.

Oleh sebab itulah akhir-akhir ini saya pun jarang menerbitkan posting artikel baru.

Jadi, sekali lagi saya mohon maaf bila belum dapat memenuhi permohonan Sobat.

Sekian dan kiranya agar dapat dimaklumi serta dipahami.
Salam. :)

04/05/13 10.34 O

maaf mau tanya mas kalau pada template saya tidak ada kode seperti yang disebutkan diatas sehingga related post masih terbuka pada ersi dekstop..
mohon bantuannya mas,terima kasih banyak sebelumnya.

06/05/13 22.50 O

@Aulia MPIya Sob, karena kebetulan related post pada template yang Sobat gunakan memang tidak menggunakan script di atas.

Jadi, uraian tersebut memang hanya berlaku untuk script yang serupa dengan yang dipakai pada template Mas Sugeng dan Template Eltelu saja.

Sedangkan untuk script yang terdapat pada template Sobat, jujur saja saya msih belum bisa menganalisanya.

07/05/13 01.49 O

setelah menelusuri artikel mas satu persatu alhamdulilah sudah bisa

cuma ko posisinya ada di bawah komentar ya,bisa tidak mas biar ada diatas komentar.

08/05/13 05.39 O

@Aulia MPBagaimana kalau begini saja Sob? Nanti saya coba dulu pada template yang Sobat kirimkan kemarin. Kemudian kalau sudah bisa diterapkan, caranya lantas saya kirimkan via email seperti kemarin agar Sobat dapat langsung menerapkannya pada template.

09/05/13 17.13 O

saya mau tanya mas bagaimana caranya membuat related post untuk versi mobile dengan tampilan spoiler (+ -)

11/05/13 08.01 O

@Dedic AhmadSaya rasa tidak beda jauh dengan cara untuk membuat spoiler pada related post tampilan versi web, Sob.

Jadi intinya Sobat tinggal menambahkan script spoiler pada rangkaian kode yang dipakai untuk menampilkan artikel terkait.

Namun sebenarnya menurut hemat saya pemberian spoiler pada related post versi seluler tidaklah efektif karena daftar artikel terkait tidak dapat secara langsung dilihat oleh pembaca. Sehingga peluang untuk dibukanya artikel yang lain oleh pembaca malah berkurang.

12/05/13 00.02 O

ia mas setuju,dan saya sudah kirim lagi template saya karena sudah ada beberapa perubahan yang saya lakukan.

trims..

14/05/13 23.14 O

trima kasih sob atas penjelasannya.
sekarang saya sangat tertarik dgn menu back to top pd tampilan mobile blog ini.keren (tanpa loading) persis kyk punya pesbuk.mgkn sobat bisa kasih saya tutorialnya
:)

14/05/13 23.51 O

@Dedic AhmadSama-sama Sobat.

Kemudian terkait dengan cara pembuatan menu back to top pada tampilan mobile, Sobat dapat menemukan uraiannya dalam artikel ini (Cara Membuat Tombol Tautan Back To Top Pada Situs Web Atau Blog Versi Mobile).

Akan tetapi teknik yang saya uraikan pada artikel tersebut adalah teknik yang paling sederhana, karena CSS yang saya gunakan untuk menata dan memberikan hiasan pada tautan back to top merupakan inline style CSS.

Jadi untuk membuat tautan back to top pada tampilan mobile yang bila diklik tidak perlu memuat ulang halaman adalah dengan cara menambahkan tag tertentu ke dalam template; dan untuk lebih jelasnya silakan Sobat buka artikel yang saya sebutkan di atas.

Semoga dapat membantu. :)

14/05/13 23.52 O

@Aulia MPOke Sob, kalau begitu sedapatnya akan saya coba untuk mengerjakannya.