Cara Membuat Menu Mendatar Rata Tengah Untuk Halaman Blog Selular (Tampilan Mobile)

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.

Sumber gambar: screenshot halaman http://m.vivanews.com/

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'>&amp;#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’.

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.