10 Juli 2012
Pernahkah Anda membuka halaman blog yang Anda kelola dalam mode tampilan versi seluler menggunakan browser komputer, yaitu dengan cara menambahkan ?m=1 di belakang URL blog? Apabila Anda pernah melakukannya, maka pastilah Anda telah mengetahui bahwa dalam area browser yang digunakan, Blogger secara default memposisikan halaman blog di sebelah kiri dan tidak di bagian tengah seperti halaman web pada umumnya.
Apabila posisi halaman yang dibuka tampil pada bagian kiri, maka bisa jadi akan terasa kurang nyaman ketika membaca konten atau artikel yang ada di dalam blog yang dimaksud. Sehingga untuk memberikan kenyamanan pada pengunjung yang membuka halaman blog dalam mode tampilan versi seluler dengan menggunakan browser komputer, maka tidak ada salahnya apabila tampilan halaman diposisikan di bagian tengah area browser.
Bagi para webmaster yang sudah mengenal dan memahami bahasa pemrograman (khususnya pemrograman web), bisa jadi bukanlah suatu hal yang rumit ketika ingin mengatur posisi halaman blog dalam area browser. Namun bagi mereka yang belum dan atau tidak mengerti serta memahami bahasa pemrograman sama sekali, maka bisa jadi hal seperti ini akan terasa sulit sekali. Karena berdasarkan data kueri penelusuran yang dilakukan oleh pengunjung blog ini, saya mendapati bahwa ternyata tidak sedikit yang belum mengetahui cara menengahkan tampilan halaman blog dalam area browser. Sehingga dengan adanya artikel ini, diharapkan nantinya dapat dijadikan sebagai sebuah referensi bagi mereka yang mengalami masalah serupa.
Lantas apa yang perlu dilakukan agar tampilan halaman blog dapat berada di tengah area browser yang digunakan? Yang perlu dilakukan adalah mengubah margin beberapa elemen halaman mobile yang ada, dalam hal ini diantaranya adalah untuk content-outer, main-outer, dan post-outer. Sedangkan caranya sendiri adalah dengan menambahkan kode CSS untuk bagian tersebut dalam area skin, dimana langkah-langkahnya adalah sebagai berikut:
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari kode </b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.
.mobile .content-outer, .mobile .main-outer , .mobile .post-outer { margin: 0pt auto; }
Ketiga, simpan template Anda.
Sehingga akhirnya apabila halaman blog versi seluler dibuka dengan menggunakan browser komputer, maka halaman akan ditampilkan atau diposisikan pada bagian tengah browser seperti yang tampak pada gambar di atas, atau seperti tampilan halaman web pada umumnya.
Namun demikian perlu diingat bahwa kode tersebut hanya dapat diimplementasikan pada template standar yang disediakan oleh Blogger. Sedangkan untuk template kustom, bagian yang harus diubah margin-nya bisa jadi berbeda, sehingga tentu saja terlebih dulu harus dilakukan analisa pada template yang digunakan untuk menentukan bagian mana yang semestinya dilakukan perubahan margin.
Semoga berguna dan bermanfaat.
Salam.
Terdapat 24 komentar pada artikel ini ▶
manteff gan, tapi buat apa coba kalo user pc pake m1 ?
Palingan kalo kuotanya mau abizz :D
Teknik ini bisa ningkatin jumlah pengunjung ga ya ??? thx
@Febriansyah Haq (Just Copy and Leave It!!!)Sekaligus untuk pengiritan quota, Sob. Sebab kalau yang dibuka adalah halaman versi seluler, maka secara otomatis ukuran halaman yang dibuka kan lebih kecil, karena banyak widget yang tidak ditampilkan dalam tampilan seluler. :D
@tom_tomSobat, seperti yang saya uraikan pada paragraf kedua dari artikel ini, bahwasanya trik ini dipakai untuk memberikan kenyamanan pada pengunjung yang membuka halaman blog dalam mode tampilan versi seluler dengan menggunakan browser komputer. Karena buka tidak mungkin ada pengunjung yang membuka halaman blog kita dengan cara tersebut.
Sehingga trik ini tidak ada kaitannya sama sekali dengan usaha peningkatan jumlah pengunjung. :)
mantap gan,,
makasih ya bermanfaat banget wt kita..terutama buat aku
@cah_ndeso asliSama-sama Sobat.
Terimakasih pula atas kunjungan dan komentarnya. :)
ini termasuk memperkecil tampilan blog saat di buka melalui seluler gak sob, soalnya blog saya ukuran tampilannya tidak seperti blog sobat saat di buka di seluler.
@GhiieellaaankSesuai dengan judul dan konten (isi) artikelnya, tentu saja teknik ini tidak digunakan untuk keperluan memperkecil tampilan blog versi seluler.
Sedangkan untuk keperluan tersebut, silakan pelajari artikel berikut ini:
Cara Mengubah Ukuran Lebar Halaman Blog Versi Seluler Untuk Tampilan Browser Komputer
Mas... saya sampai ketawa ngakak..
hahaha.
saking senenge kui lho.. TUTORIAL BLOGnya MENYENTUH hati banget,,
SEMUA YANG SAYA CARI.. SAYA TEMUKAN disini.
MAkasih banyak nggih,,
matur suwun..
Mas.. MATTUR SUWUN..
gak bisa berkata2 lagi dah,
POKOKNYA semuanya ada disini,
TUTORIAL BLOG paling membuat saya terharu,,
karena seneng..
@Wiwinjuliyanti Sragencity CentraljavaSama-sama Sobat. Semoga tutorial yang saya terbitkan benar-benar dapat diambil guna dan manfaatnya. :)
@AYAHE MELA
Gan koq punya saya masih ttp dipinggir, gak ke tengah,, kira2 apanya ya??
mohon pencerahannya.
www.cybermistick.com/?m=1
@Bang DadanJadi begini, kebetulan Sobat kan menggunaan kustom template. Sehingga secara otomatis rangkaian CSS yang digunakan berbeda dengan rangkian CSS standar yang dipakai dalam template standar Blogger.
Nah, setelah saya analisa maka agar halman dapat berada pada posisi bagian tengah, silakan Sobat gunakan rangkaian CSS di bawah ini.
html body #outer-wrapper {
margin: 0px auto;
}
Sekian dan semoga dapat membantu. :)
sob mau nanya nih...
kenapa ya, setiap saya mencoba trik-trik ngeblog dari artikel blog ini, sebagian besar selalu gagal. Padahal banyak artikel yang saya cari disini, tetapi itu hanya harapan saya. Tolong pencerahannya sob...!
@Aditya L PramanaSobat, perlu diketahui bahwasanya teknik kustomisasi template blog yang saya terbitkan di sini sebagian besar merujuk pada penggunaan template standar Blogger.
Sementara itu perlu diketahui pula bahwasanya antara satu template dengan template yang lainnya belum tentu memiliki karakteristik yang sama.
Dengan demikian dapat diartikan bahwa teknik yang saya uraikan di sini belum tentu dapat diimplementasikan pada kustom template (dari pihak ketiga).
Nah, oleh sebab itulah hampir dalam setiap artikel juga saya sampaikan agar mengajukan pertanyaan dengan cara mengeposkan komentar jika mengalami kendala dalam menerapkan teknik yang ada.
Karena dengan cara seperti itu maka saya akan dapat melakukan anlisa secara langsung untuk mengetahui penyebab dari kendala yang dihadapi, sehingga dapat memberikan solusi atas kendala yang dimaksud.
Akan tetapi karena tidak seluruh waktu saya gunakan untuk ngeblog, maka solusi jawaban pun terkadang tidak dapat saya berikan secara seketika.
Jadi, jika Sobat mengalami kesulitan atau kendala ketika menerapkan teknik yang ada di blog ini, maka tak perlu sungkan untuk mengajukan pertanyaan.
Sekian dan semoga dapat membantu. :)
Tutorialnya mantaf nih, ane coba dulu
@Ahmad SofihudinSilakan bila Sobat ingin mencoba untuk menerapkannya.
@AYAHE MELAHei bukannya kode yang kamu berikan itu yang custom template, coba kamu lihat semua template kebanyakan menggunakan ID bukan CLASS. :P
Biasanya menggunakan #outer-wrapper atau #main-wrapper. :v
Sebaiknya kamu update artikelnya... dengan menambahkan ID tersebut.
@AYAHE MELAMungkin karena kamu membuat tutorial ini berdasarkan template kamu saja tidak berdasarkan template yang lain. :v Coba kamu lihat tutorial dari sini: www.dte.web.id
Di Blog itu tutorial disajikan secara umum dan bisa diterapkan di semua template. :D Hehehehehe
Aku lihat struktur template kamu sajah banyak di custom dan berbeda dengan template blogger kebanyakan. :P
@Jefry DewanggaSebuah pernyataan yang sangat menarik untuk ditanggapi, Sob. Sehingga rugi rasanya bagi saya bila tidak memberikan apresiasi dan tanggapan terhadap pernyataan tersebut.
Oke lah, saya rasa tidak ada salahnya kok bila Sobat berkata demikian. Karena bisa jadi sebelum memberikan pernyataan yang seperti itu, Sobat belum membaca atau bahkan tidak membaca sama sekali uraian yang saya paparkan pada artikel di atas secara cermat dan lengkap.
Apabila sebelumnya Sobat telah membaca uraian pada artikel di atas secara cermat dan lengkap, maka pada paragraf terakhir Sobat akan menemukan kalimat berikut ini: Namun demikian perlu diingat bahwa kode tersebut hanya dapat diimplementasikan pada template standar yang disediakan oleh Blogger. Sedangkan untuk template kustom, bagian yang harus diubah margin-nya bisa jadi berbeda, sehingga tentu saja terlebih dulu harus dilakukan analisa pada template yang digunakan untuk menentukan bagian mana yang semestinya dilakukan perubahan margin.
Nah, silakan Sobat cermati terlebih dulu kalimat yang tercetak dengan huruf tebal di atas.
Bukankah di situ sudah sangat jelas tertulis "bahwa kode tersebut hanya dapat diimplementasikan pada template standar yang disediakan oleh Blogger?
Sehingga sama artinya bahwa kode tersebut memang hanya dapat diterapkan pada template standar Blogger dan tidak untuk diterapkan pada custom template.
----------
Dan kemudian apabila Sobat berkata dengan pernyataan seperti di bawah ini:
Hei bukannya kode yang kamu berikan itu yang custom template, coba kamu lihat semua template kebanyakan menggunakan ID bukan CLASS. :P
Biasanya menggunakan #outer-wrapper atau #main-wrapper. :v
Maka ada baiknya jika Sobat lihat terlebih dulu bagaimana model CSS yang digunakan pada template standar yang telah disediakan oleh Blogger.
Pada template standar yang disediakan oleh Blogger, Sobat akan mendapati bahwa hampir 100% CSS-nya menggunakan CLASS dan hanya beberapa yang menggunakan ID.
Sehingga apabila Sobat mengatakan "Hei bukannya kode yang kamu berikan itu yang custom template, maka jawabannya tentu saja bukan. Karena kode yang saya berikan ada artikel di atas adalah mengacu pada rangkaian CSS yang terdapat pada template standar yang disediakan oleh Blogger.
Dan kemudian apabila Sobat mengatakan "coba kamu lihat semua template kebanyakan menggunakan ID bukan CLASS. :P Biasanya menggunakan #outer-wrapper atau #main-wrapper", maka jawabannya adalah benar sekali apa yang Sobat sampaikan bahwa kebanyakan template memang seperti itu, karena bisa jadi lebih banyak yang menggunakan custom template daripada menggunakan template standat yang telah disediakan oleh Blogger.
----------
Kemudian apabila pada pernyataan di atas Sobat mengatakan "Sebaiknya kamu update artikelnya... dengan menambahkan ID tersebut.", maka saya rasa tidak perlu adanya update atau pembaruan untuk artikel di atas karena disitu sudah jelas-jelas saya tuliskan bahwa kode tersebut hanya dapat diimplementasikan pada template standar yang disediakan oleh Blogger.
:)
@Jefry DewanggaSobat, ada baiknya bila Sobat baca kembali uraian yang saya paparkan pada artikel di atas secara cermat dan lengkap terlebih dulu.
Bukankan pada paragraf terakhir sudah saya tuliskan seperti kalimat di bawah ini?
Namun demikian perlu diingat bahwa kode tersebut hanya dapat diimplementasikan pada template standar yang disediakan oleh Blogger. Sedangkan untuk template kustom, bagian yang harus diubah margin-nya bisa jadi berbeda, sehingga tentu saja terlebih dulu harus dilakukan analisa pada template yang digunakan untuk menentukan bagian mana yang semestinya dilakukan perubahan margin.
Nah, dari kalimat tersebut sudah sangat jelas kan bahwa saya membuat tutorial ini berdasarkan template standar yang telah disediakan oleh Blogger dan bukan berdasarkan pada template yang saya gunakan sekarang.
----------
Apabila Sobat mengatakan bahwa "Aku lihat struktur template kamu sajah banyak di custom dan berbeda dengan template blogger kebanyakan. :P", itu memang benar. Karena sekarang ini saya memang menggunakan template yang 100% saya buat sendiri, sehingga tentu saja template yang saya pakai sekarang ini sangat berbeda dengan template yang dipakai oleh orang kebanyakan.
Dan apabila Sobat mencari template yang sama persis (dari segala segi) dengan template yang sekarang ini saya pakai, maka saya dapat memastikan bahwa Sobat tidak akan dapat menemukannya karena memang template ini belum pernah saya bagikan sama sekali.
Akan tetapi walaupun sekarang ini saya sendiri menggunakan custom template, buka berarti tutorial yang saya terbitkan lantas berdasar pada template yang saya pakai. karena yang saya jadikan dasar untuk membuat dan kemudian menerbitkan artikel tentu saja adalah template standar yang telah disediakan oleh Blogger.
:)
kalau untuk membuat tampilan mobile seperti blog eltelu ini gmna mas
@Mawan Cradlez Sobat, secara prinsip caranya adalah serupa dengan teknik yang dipakai untuk membuat tampilan desktop pada sebuah blog. Hanya saja ketika Sobat ingin melakukan kustomisasi pada tampilan mobile, maka terlebih dulu Sobat harus mengaktifkan setelan khusus yang terdapat pada pilihan template untuk tampilan seluler.
Semoga dapat membantu. :)