13 Juli 2012
Jika Anda telah melakukan perubahan model bidang posting dan atau tema halaman blog versi seluler seperti yang saya lakukan pada blog ini, maka tentu saja bidang posting menjadi lebih lebar bila dibandingkan dengan ukuran bidang posting pada halaman versi web. Hal ini disebabkan karena dalam halaman blog versi seluler tidak ditampilkan bidang sidebar seperti halnya dalam halaman blog versi web yang dapat dimanfaatkan untuk menempatkan berbagai macam widget, sehingga akhirnya mulai dari margin kiri sampai dengan margin kanan halaman, seluruhnya dimanfaatkan sebagai bidang posting.
Padahal perlu diketahui bahwa lebar halaman blog versi seluler apabila dibuka dengan menggunakan browser komputer adalah sama dengan ukuran lebar yang digunakan pada setelan halaman versi web. Nah, walaupun hal tersebut seakan terkesan sepele, namun sebenarnya hal yang seperti ini juga perlu untuk kita perhatikan, karena bukan tidak mungkin suatu hal yang kita anggap sepele akan dapat memberikan dampak besar dan positif pada blog yang kita kelola.
Salah satu alasan yang mendasarinya apalagi kalau bukan demi kenyamanan pengunjung yang membaca artikel kita. Karena bukan tidak mungkin pula jika pengunjung lebih suka membuka halaman blog dalam mode tampilan seluler, terutama bagi mereka yang memiliki koneksi internet dengan bandwidth rendah, karena dengan membuka halaman blog dalam mode tampilan seluler memang akan terasa lebih ringan dibandingkan dengan membuka halaman versi web.
Lantas kenapa ukuran lebar halaman versi seluler perlu diperkecil? Perlu diingat bahwa apabila ukuran halaman terlalu lebar (dalam hal ini adalah untuk bagian bidang posting), maka secara otomatis pula area baca yang harus dilihat oleh mata terlalu luas, sehingga secara otomatis pula mata akan menjadi cepat lelah karena harus bergerak ke kiri dan ke kanan untuk membaca konten artikel yang saat itu dibuka. Berbeda halnya jika ukuran lebar halaman tidak terlalu luas, maka pandangan mata ketika sedang membaca artikel akan terfokus pada satu titik (area baca), yang pada akhirnya mata pun tidak cepat lelah walau harus membaca beberapa artikel sekalipun.
Kemudian bagaimana caranya mengubah ukuran lebar halaman blog versi seluler untuk tampilan browser komputer? Untuk melakukan hal tersebut, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari kode </b:template-skin> dan kemudian perhatikan bahwa di atas kode tersebut terdapat kode ]]>. Nah, sisipkan kode berikut ini tepat di atasnya.
.mobile .content-outer, .mobile .content-fauxcolumn-outer, .mobile .region-inner { max-width: 800px; }
Ketiga, simpan template Anda.
Perlu Anda ketahui bahwa ukuran lebar pada kode tersebut merupakan ukuran lebar maksimal yang saya pakai untuk tampilan halaman versi seluler pada blog ini. Sehingga apabila ukuran tersebut belum sesuai dengan keinginan Anda, maka dapat Anda lakukan penyesuaian ukuran dengan cara mengganti angka yang terdapat pada kode max-width: 800px;.
Semoga berguna dan bermanfaat.
Salam.
Terdapat 10 komentar pada artikel ini ▶
manteff gan, bisa dicoba nih. Buat para visitor yg kuotanya mau habis nih :D
@Febriansyah Haq (Just Copy and Leave It!!!)He heee... silakan Sob. :)
Tapi bukan hanya untuk yang quotanya mau habis aja loh. Bisa juga dicoba untuk yang koneksi internetnya lambat.
Contohnya saja seperti di tempat tinggal saya, walaupun quota masih full tapi koneksinya sangat lambat. :(
Maklumlah, daerah tempat tinggal saya memang sudah termasuk pinggiran dan jauh dari jangkauan sinyal. he heee...
Template-nya Keren sob, Klo boleh di share dong :)
@Arif KurniawanSobat, sebenarnya template yang saya gunakan ini adalah template standar Blogger yang telah saya modifikasi.
Apabila ingin mempelajarinya teknik yang saya gunakan, maka Sobat dapat membuka artikel yang telah saya terbitkan karena semua yang saya lakukan pada blog ini juga saya terbitkan sebagai suatu artikel. :)
@elteluOkee sob :)
Wadduuhh rupanya ada di sini artikelx,, smart for mercy, lest the family owners of blogger,, hehehehe joking brother
mz qok saya tidak menemukan kode'a yah..
tolong bantu mz.???
@Jaya PrasetyaRangkaian kode CSS di atas memang hanya terdapat dan hanya dapat diterapkan pada template standar yang disediakan oleh Blogger, Sob. Sehingga apabila mencarinya pada template yang Sobat gunakan, tentu saja tidak ditemukan karena kebetulan template yang Sobat gunakan adalah template dari pihak ketiga. Ini artinya apabila kode CSS di atas diterapkan pada template yang Sobat gunakan juga tidak memberikan dampak apapun karena class atau ID yang digunakan di dalamnya bisa saja berbeda dengan class atau ID yang dipakai pada template standar Blogger.
Semoga dapat membantu. :)
Gan cara Menghilangkan Sidebar blog di tampilan seluler Gimana?
@Arif SubrotoCoba Sobat gunakan display:none; pada CSS untuk bagian yang dimaksud.