Cara Mengatur Atau Mengubah Jarak Antara Halaman Blog Dengan Tepian Browser

Sobat, seperti yang kita tahu bahwasanya pada beberapa template standar (bawaan) Blogger diberikan jarak yang sama antara halaman utama blog dengan tepian browser. Dimana dalam hal ini jarak yang diberikan untuk beberapa jenis template tersebut adalah 30px auto; yang maksudnya adalah halaman utama blog memiliki jarak 30 piksel dari tepi atas dan bawah serta jarak otomatis untuk tepi kiri dan kanan. Penggunaan margin yang seperti ini memang sangat beralasan, karena penggunaan margin auto untuk tepi kiri dan kanan akan mengakibatkan halaman berada pada posisi tengah browser, sedangkan penggunaan margin 30px dimaksudkan untuk memberi ruang sebagai tempat bilah navbar Blogger.

Namun demikian pada kenyataannya ketika margin atas tertutup atau terisi dengan bilah navbar, margin bawah tetaplah kosong sehingga terdapat jarak yang cukup lebar antara halaman blog bagian bawah dengan tepian browser. Akibatnya tampilan halaman bagian atas dengan bawah terkesan kurang proporsional, sehingga hal inilah yang terkadang menjadi salah satu alasan bagi kita untuk menyembunyikan bilah navbar agar desain tampilan halaman menjadi tampak lebih rapi. Dengan menyembunyikan bilah navbar standar Blogger, akhirnya sisi halaman (atas-bawah dan kiri-kanan) memiliki margin yang sama dan tampilan halaman pun menjadi lebih rapi dan proporsional.

Oke, sekarang kita kembali lagi pada bahasan mengenai margin. Perlu diketahui bahwa selain dapat dilakukan kustomisasi pada bagian widget, kita pun sebenarnya dapat dengan mudah melakukan modifikasi pada template standar Blogger untuk bagian atau elemen-elemen halaman yang lainnya, misalnya saja adalah untuk margin yang digunakan pada halaman utama blog. Dimana syarat untuk melakukan hal tersebut tentu saja kita harus memahami script atau kode-kode yang digunakan dalam template. Karena jika tidak maka bisa jadi template akan menjadi rusak atau bahkan malah error sehingga tidak dapat digunakan lagi.

Mengenai kustomisasi margin halaman, jika template yang digunakan adalah template standar (bawaan) Blogger, maka modifikasi dapat dilakukan dengan cara mengubah setelan margin yang dipakai pada rangkaian kode CSS untuk bagian content-outer. Dimana seperti yang saya sebutkan di atas bahwasanya setelan yang dipakai untuk bagian tersebut adalah 30px auto;.

Lantas bagaimana cara untuk melakukan perubahan pada bagian tersebut? Untuk keperluan ini, maka dapat dilakukan dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari rangkaian kode CSS untuk bagian .content-outer { dan kemudian lakukan penyesuaian setelan pada margin yang digunakan dalam bagian tersebut sesuai dengan margin yang diinginkan. Sebagai contoh misalnya diubah menjadi margin: 30px auto 0px; yang artinya margin untuk bagian atas adalah 30 piksel, margin kiri-kanan auto, dan margin bawah 0 (nol) piksel. Atau bila bilah navbar telah disembunyikan, maka margin dapat diubah menjadi margin: 0px auto 0px; yang artinya margin untuk bagian atas-bawah adalah 0 (nol) piksel dan margin untuk bagian kiri-kanan adalah auto.

Sedangkan untuk rangkaian kode CSS bagian .content-outer { yang perlu dilakukan perubahan, sebagai contoh misalnya adalah seperti rangkaian kode CSS untuk template dalam kategori ‘Mudah (Simple)’ di bawah ini.

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px; <!-- ubahsesuaikan bagian ini -->
}

Namun apabila kesulitan dalam menemukan bagian tersebut, maka dapat disiasati dengan membuatkan kode CSS baru tepat di atas ]]></b:skin>, karena dengan cara demikian maka kode CSS baru tersebut akan menggantikan kode CSS untuk bagian yang sama yang terletak di atasnya.

Ketiga, setelah melakukan penyesuaian pada margin yang akan digunakan, maka langkah berikutnya lakukan pratinjau halaman dan apabila telah sesuai dengan yang diinginkan selanjutnya simpan template.

Dan kemudian walaupun saya menyadari sepenuhnya bahwa uraian di atas tidaklah ada artinya sama sekali bagi Anda yang telah terbiasa dengan dan atau memahami script serta kode template. Namun saya berharap semoga sesuatu yang terkesan sepele dan tak ada artinya ini, suatu saat dapat berguna dan bermanfaat bagi orang lain. Karena (menurut pendapat saya) sesuatu yang kecil dan terkesan sepele bukanlah tak memiliki arti dan atau makna sama sekali, akan tetapi bisa saja menjadi hal yang sangat berarti dan bermakna bagi mereka yang benar-benar membutuhkannya.

Semoga dapat diambil guna dan manfaatnya.

Salam.