Apakah Anda pernah membuka halaman blog ini
dengan menggunakan perangkat mobile, dalam hal ini adalah dengan
memanfaatkan browser yang terdapat dalam telepon selular yang Anda
miliki? Jika Anda belum pernah membuka halaman blog ini
dengan menggunakan perangkat selular, maka tidak ada salahnya apabila
Anda mencoba untuk melakukannya. Dan kemudian setelah membuka halaman blog ini dengan menggunakan perangkat selular, coba perhatikan tampilan halamannya. Nah, ketika membuka blog ini dengan memakai browser yang terdapat dalam telepon seluler, bisa jadi Anda akan terkejut karena tampilan selular untuk halaman blog ini sangatlah berbeda bila dibandingkan dengan tampilan selular halaman blog lain walaupun menggunakan platform yang sama.
Diantara beberapa bagian yang berbeda dari tampilan halaman versi selular blog ini
dengan halaman versi selular blog lain yang menggunakan platform sama,
salah satunya adalah terdapat pada bagian menu halaman yang terletak
diantara header blog dan bidang posting. Apabila pada umumnya menu
tersebut ditampilkan dalam bentuk menu drop-down yang merupakan model
menu default untuk halaman blog tampilan versi selular, maka Anda akan
mendapati menu halaman untuk versi selular blog ini ditampilkan dalam bentuk menu mendatar – rata tengah.
Menu mendatar rata tengah untuk halaman blog tampilan selular ini
sebenarnya adalah versi ketiga untuk model menu halaman tampilan
selular. Dimana untuk model menu yang pertama saya terbitkan dalam
artikel yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, dan model menu yang kedua saya terbitkan dalam artikel yang berjudul “Cara Mengubah Drop-Down Menu Pada Halaman Blog Versi Mobile Menjadi Menu Model Vertikal”.
Namun pada kenyataannya kedua model menu halaman tampilan selular
tersebut masih kurang efektif apabila diterapkan, apalagi jika perangkat
selular yang digunakan untuk membuka halaman blog ini memiliki resolusi layar rendah atau telepon selular dengan model layar kecil.
Nah, terinspirasi dari menu halaman untuk tampilan selular situs web VIVAnews.com
(seperti yang tampak pada gambar di bawah ini), saya mencoba kembali
melakukan kustomisasi pada menu halaman tampilan selular untuk blog
dengan platform Blogger, dan kemudian hasilnya adalah seperti yang saya
uraikan dalam artikel ini.
Seperti yang tampak pada gambar di atas, bahwasanya menu halaman untuk
tampilan selular dari situs web tersebut ditampilkan dalam bentuk
mendatar dengan sekat-sekat diantara setiap menu yang ada. Dimana model
menu mendatar – rata tengah seperti ini bisa jadi lebih efektif dan
efisien apabila dibandingkan dengan model menu tampilan selular seperti
yang saya ulas pada kedua artikel saya sebelumnya.
Saya menyebutnya lebih efektif dan efisien karena dengan menggunakan
model menu mendatar – rata tengah seperti ini, maka semua menu halaman
akan langsung ditampilkan, sehingga dengan demikian akan sangat
memudahkan pengunjung untuk mengetahui dan kemudian membuka setiap
halaman yang ada. Kemudian saya menyebutnya lebih efisien karena model
menu halaman seperti ini tidak memakan tempat yang cukup banyak,
walaupun jumlah menu yang ditampilkan tidaklah sedikit. Sehingga dengan
demikian pengunjung akan tetap mudah mengakses setiap halaman yang ada
walaupun menggunakan perangkat selular yang digunakan untuk membuka
halaman tersebut memiliki resolusi layar rendah atau telepon seluler
dengan ukuran layar kecil.
Oke, sekarang kita kembali pada pokok pembasahan yang sebelumnya, yaitu
tentang cara membuat menu mendatar rata tengah untuk halaman blog
selular (tampilan mobile). Jadi begini, perlu diketahui bahwa tidak
diperlukan pengaturan khusus ketika kita ingin mengubah menu drop-down
(sebagai tampilan menu default halaman blog tampilan selular) menjadi
menu mendatar – rata tengah (horizontal), karena dalam proses
penerapannya adalah serupa dengan penyisian script atau kode tertentu
dalam melakukan kustomisasi template pada umumnya. Namun demikian satu
hal yang perlu diingat adalah, sangat disarankan agar melakukan backup terlebih dulu atas template yang digunakan,
sebelum Anda melakukan kustomisasi. Hal ini dimaksudkan agar jika
terjadi kekeliruan dalam melakukan kustomisasi, maka desain halaman blog
dapat dikembalikan dengan mudah, yaitu dengan menggunakan backup
template sebelumnya.
Kemudian apabila template sudah dibackup, maka langkah selanjutnya buka editor template dengan mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’, dan selanjutnya kerjakan langkah-langkah di bawah ini secara berurutan.
Pertama, cari kode .mobile .tabs-inner .PageList .widget-content {
dan kemudian hapus rangkaian kode yang ada untuk kode tersebut. Dalam
hal ini seperti ilustasi kode CSS yang tampak di bawah ini.
--> hapus dari sini .mobile .tabs-inner .PageList .widget-content { ----------------- kode ----------------- } <-- hapus sampai sini
Kedua, cari kode .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { dan kemudian hapus rangkaian kode yang ada untuk kode tersebut, seperti cara yang digunakan dalam langkah pertama.
--> hapus dari sini .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { ----------------- kode ----------------- } <-- hapus sampai sini
Ketiga, cari kode <span class='pagelist-arrow'>&#9660;</span> dan kemudian untuk mempermudah proses, maka hapus rangkaian kode yang ada di atasnya mulai dari kode <b:if cond='data:mobile'> sampai dengan kode <b:else/> seperti yang tampak pada rangkaian kode di bawah ini.
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <b:if cond='data:mobile'> <-- hapus dari sini ----------------- kode ----------------- <b:else/> <-- hapus sampai sini <ul> <b:loop values='data:links' var='link'>
Selanjutnya salin kode di bawah ini dan kemudian sisipkan di tempat kode yang dihapus tadi.
<b:if cond='data:mobile'> <ul> <b:loop values='data:links' var='link'> | <b><a expr:href='data:link.href'><data:link.title/></a></b> </b:loop> </ul> <b:else/>
Sehingga akhirnya rangkaian kode menjadi seperti kode di bawah ini.
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <b:if cond='data:mobile'> <ul> <b:loop values='data:links' var='link'> | <b><a expr:href='data:link.href'><data:link.title/></a></b> </b:loop> </ul> <b:else/> <ul> <b:loop values='data:links' var='link'>
Keempat, salin kode berikut ini dan kemudian sisipkan tepat di atas kode ]]></b:skin>.
/* Menu Halaman Selular -- Horizontal Rata Tengah ------------------------------------------------------------- */ .mobile .tabs-inner .PageList .widget-content { width: 99,99%; height: 100%; padding: 1px; margin: 0px; } .mobile .tabs-inner .widget ul { padding: 3px; text-align: center; border: 1px solid #000000; background: #eeeeee; background: -moz-linear-gradient( center top, white 40%, #cccccc 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) ); }
Kelima, simpan template Anda.
Setelah template disimpan, maka apabila halaman blog dibuka dengan
menggunakan perangkat selular, menu halaman akan ditampilkan seperti
yang tampak pada gambar di bawah ini, dan juga seperti yang tampak pada
gambar paling atas (dalam hal ini adalah gambar tampilan menu halaman
selular rata tengah yang terdapat di bawah judul artikel ini).
Sementara itu untuk memastikan keberhasilan penerapan teknik tersebut,
maka Anda dapat membuka halaman blog dengan menggunakan browser pada
perangkat selular yang Anda miliki, atau dapat pula dilakukan dengan
menggunakan browser yang terdapat pada komputer Anda, yaitu dengan
menambahkan tanda ?m=1 di belakang URL blog (sebagai contoh misalnya: http://eltelu.blogspot.com/?m=1). Dan sekali lagi yang perlu saya tekankan adalah, backup template Anda sebelum menerapkan teknik tersebut. Dan sebagai catatan, bahwasanya berdasarkan uji coba yang saya lakukan, teknik tersebut dapat diterapkan pada template Blogger kategori ‘Mudah’, ‘Jendela Gambar’, ‘PT Keren Sekali’, ‘Tanda Air’, ‘Kelembutan’, dan juga ‘Perjalanan’.
Tidak ada komentar:
Posting Komentar