<blink>-| Cara Membuat Atau Menjadikan Posisi Halaman Blog Terletak Di Tengah Area Browser|-</blink>

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.