Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

4
Tgl. 14 September 2012

[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 Selule...

ELTELU - Blogger Mobile
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://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/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://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/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.
ELTELU - Menu Mendatar Pada Blog Versi Seluler

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.
ELTELU - Menu Horizontal Pada Blog Versi Seluler

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.



Katagori: , ,
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. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 4 komentar pada artikel ini ▶
22/09/12 14.05 O

sobat kenapa ya saya kan buat menu navigasi, pertama saya buat melalui tambah laman .. setelah saya buat urlnya berganti dengan sendirinya menjadi javascript;, mohon di bantu sob, oh iya pasang banner saya juga ya,, banner sobat sudah saya pasang di footer

22/09/12 21.43 O

@GhiieellaaankWahhhh, gimana ya... Jujur saja saya kurang paham dengan yang Sobat maksudkan.

Karena menurut sepengetahuan saya, setelah memasukkan URL dan kemudian disimpan maka terbentuklah menu baru di dalam bilah menu sesuai dengan URL dan menu tampilan yang sebelumnya telah dimasukkan.

Oh ya, btw banner sudah saya pasang dan silakan dicek di beranda.

17/01/13 09.13 O

om, ada template mobile yang bisa di download ngga?

17/01/13 13.11 O

@Anif WahyudiyantoApabila yang Sobat maksud adalah XML Template secara utuh, maka untuk sementara sampai saat ini saya belum meyediakan XML Template yang dapat diunduh.

Namun demikian bermaksud melakukan kustomisasi tampilan versi seluler pada blog yang Sobat kelola, maka artikelnya dapat Sobat temukan di sini. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog