Cara Mengubah Drop-Down Menu Pada Halaman Blog Versi Mobile Menjadi Menu Model Vertikal

Sobat, seperti yang telah saya uraikan dalam artikel sebelumnya yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, bahwasanya menu drop-down yang menjadi menu default apabila halaman blog dibuka dengan menggunakan perangkat seluler, dapat diubah atau dikustomisasi kedalam bentuk menu model horizontal. Sehingga dengan demikian maka semua menu halaman akan ditampilkan dan dapat langsung dilihat oleh pengunjung, yang akhirnya dapat mempermudah pengunjung dalam melakukan navigasi.

Namun seperti yang telah saya uraikan pula dalam artikel yang berjudul “Apakah Menu Drop-Down Pada Halaman Blog Versi Mobile Dapat Diubah Menjadi Menu Model Vertikal?” telah saya uraikan pula bahwasanya penggunaan menu model horizontal menjadi kurang efektif ketika perangkat seluler yang digunakan untuk mengakses halaman blog tersebut memiliki resolusi layar kecil, sehingga semua menu tidak dapat ditampilkan dalam satu baris, apalagi jika menu halaman yang ada cukup banyak jumlahnya. Dengan demikian pada akhirnya tampilan halaman malah terkesan kurang rapi dan akan lebih baik apabila beberapa menu halaman yang ada tersebut dijadikan dalam bentuk menu vertikal, yang akan menampilkan menu dalam beberapa baris sekaligus. Dengan menggunakan model menu vertikal untuk menu halaman dengan jumlah banyak, maka selain akan mempermudah pengunjung dalam melakukan navigasi, juga akan menjadikan tampilan halaman terkesan lebih rapi dan profesional.

Seperti biasa dan juga seperti yang telah saya sampaikan dalam artikel sebelumnya yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, bahwasanya karena kita akan melakukan kustomisasi pada template, maka sangat disarankan apabila sebelumnya dilakukan backup terhadap template yang digunakan. Hal ini dilakukan untuk mengantisipasi apabila terjadi kekeliruan saat melakukan kustomisasi, sehingga apabila terjadi hal yang demikian maka template dapat dikembalikan dengan mudah yaitu memanfaatkan backup template yang telah diunduh atau disimpan sebelumnya. Kemudian apabila template sudah dibackup, 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 -----------------

}
<-- 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 -----------------

}
<-- sampai sini

Ketiga, cari kode <span class='pagelist-arrow'>&amp;#9660;</span> dan kemudian 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.

<div class='widget-content'>
    <b:if cond='data:mobile'> <-- hapus dari sini

      ----------------- kode -----------------

    <b:else/> <-- sampai sini
      <ul>
        <b:loop values='data:links' var='link'>

Dan selanjutnya salin kode di bawah ini kemudian sisipkan di tempat kode yang dihapus tadi.

<b:if cond='data:mobile'>
        <b:loop values='data:links' var='link'>
        <ul><li><div align='center'><a expr:href='data:link.href'><data:link.title/></a></div></li></ul>
        </b:loop>
      <b:else/>

Keempat, salin kode berikut ini dan kemudian sisipkan tepat di atas kode ]]></b:skin>.

/* Menu Halaman Vertikal Tampilan Selular
------------------------------------------------------------- */

.mobile .tabs-inner .PageList .widget-content {
  width: 99,99%; height: 100%;
  padding: 1px;  margin: 0px; 
}

.mobile .tabs-inner .widget ul {
  border: 1px solid #000000;
}

.mobile .tabs-inner .widget li {
  width: 100%; height: 100%;
}

.mobile .tabs-inner .widget li:first-child a {
  padding-$startSide: 0px;
}

.mobile .tabs-inner .widget a {
  text-align: center;
  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) );
  width: 100%; height: 100%;
  border-$endSide: none;
  padding: 4px;
}

.mobile .tabs-inner .widget a:hover {
  background: #eeeeee; 
  background: -moz-linear-gradient( center top, white 70%, #cccccc 100% ); 
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) );
}

Kelima, simpan template Anda.

Sehingga akhirnya apabila halaman blog dibuka dengan menggunakan perangkat selular, maka menu halaman akan ditampilkan dalam bentuk menu model vertikal seperti yang tampak pada gambar di bawah ini.

Sedangkan untuk memastikan apakah teknik yang telah diterapkan tersebut sudah berhasil atau belum, maka Anda dapat membuka halaman blog tersebut dengan menggunakan browser pada perangkat selular yang Anda miliki, atau dapat pula menggunakan browser yang terdapat pada komputer yang Anda gunakan, yaitu dengan menambahkan tanda ?m=1 di belakang URL blog (misal: http://eltelu.blogspot.com/?m=1).

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.