[UPDATE] Perbaikan Dan Pembenahan Bug Pada Kode CSS Untuk Template Blog Versi Seluler

Artikel ini merupakan update dari artikel sebelumnya yang berjudul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan “MOBILE TEMPLATE - Customize Blogger Mobile Templates”. Update dalam artikel ini dimaksudkan guna memberikan perbaikan dan pembenahan atas ditemukannya bug pada kode CSS yang dipakai serta diuraikan dalam kedua artikel tersebut. Sehingga apabila Anda menggunakan kode CSS yang terdapat dalam kedua artikel tersebut untuk melakukan kustomisasi template untuk tampilan versi seluler, maka perlu kiranya dilakukan perubahan terhadap 2 (dua) buah rangkaian kode yang dipakai, sesuai dengan rangkaian kode CSS baru dalam artikel ini.

Sementara itu bug yang dimaksud dalam uraian di atas terdapat dalam rangkaian kode CSS untuk menu horizontal tampilan versi mobile, sehingga guna melakukan pembenahan maka silakan cari rangkaian kode CSS berikut ini:

.mobile .tabs-inner .widget ul {
  padding-top: 4px; padding-bottom: 4px;
  margin-left: 0px; margin-right: 0px;
  padding-left-value: 0px; padding-right-value: 0px;
  text-align: left; border: none;
  border-radius: 0px; height: auto;
  background:  url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQ3ihdiaF0C46IRogPtJOov-Z2GlZ2PvZjOyFEBOrkdXf2DlUc5HnKTNSMr4hVJtsDJewPCX5Nooie6sf7sUpAwAwrX2L8HUHvAIhAknqKPQK7TuYBs9UTnPBhjY8rRnw9BcKbwbqYQ/s800/Menu.png') repeat-x scroll left bottom rgb(243, 244, 246);
}

.mobile .tabs-inner .widget ul li,
.mobile .tabs-inner .widget li {
  border-top: none;
  margin-left: 6px;
}

Dan kemudian ganti dengan rangkaian kode CSS di bawah ini.

.mobile .tabs-inner .widget ul {
  padding-top: 4px; padding-bottom: 4px; 
  text-align: left; border: none;
  border-radius: 0px; height: auto;
  background:  url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQ3ihdiaF0C46IRogPtJOov-Z2GlZ2PvZjOyFEBOrkdXf2DlUc5HnKTNSMr4hVJtsDJewPCX5Nooie6sf7sUpAwAwrX2L8HUHvAIhAknqKPQK7TuYBs9UTnPBhjY8rRnw9BcKbwbqYQ/s800/Menu.png') repeat-x scroll left bottom rgb(243, 244, 246);
}

.mobile .tabs-inner .widget ul li,
.mobile .tabs-inner .widget li {
  border-top: none;
  margin-right: 6px;
}

Perlu diketahui bahwasanya apabila kode CSS yang digunakan adalah rangkaian kode CSS yang pertama dan menu untuk tampilan versi seluler terdiri dari beberapa baris, maka antara baris menu yang pertama dan baris menu yang berikutnya tampil tak sejajar seperti yang pada gambar di bawah ini.

Seperti yang tampak pada gambar di atas (ditandai dengan gambar anak panah), dapat dilihat bahwa antara huruf ‘B’ untuk menu ‘Beranda’ dan huruf ‘T’ untuk menu ‘Tentang’ tampil tak sejajar. Sehingga akhirnya dengan tampilan seperti itu baris menu menjadi terkesan kurang menarik.

Sedangkan apabila kode CSS yang digunakan adalah rangkaian kode CSS yang kedua, maka walaupun menu untuk versi mobile terdiri dari beberapa baris, tampilannya akan menjadi sejajar secara vertikal seperti yang tampak pada gambar di bawah ini.

Nah, dengan demikian maka tampilan baris menu untuk versi seluler akan terkesan menjadi lebih menarik, walaupun jumlah menu yang ditampilkan terdiri dari beberapa baris sekalipun.

Semoga berguna dan bermanfaat.

Salam.