Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

30
Tgl. 12 Oktober 2012

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 bl...

Ilustrasi Jarak 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.


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 30 komentar pada artikel ini ▶
13/10/12 08.19 O

untuk auto itu sendiri ya mas.. N brapa jarak yg dtentukan dari auto

13/10/12 16.25 O

@AgusductankSobat, seperti yang saya uraikan pada paragraf pertama artikel ini, bahwasanya penggunaan margin auto untuk tepi kiri dan kanan akan mengakibatkan halaman berada pada posisi tengah browser. Sehingga ketika lebar halaman browser lebih luas daripada lebar halaman blog, maka secara otomatis halaman blog akan diposisikan pada bagian tengah halaman browser.

15/10/12 23.17 O

kurang paham.....mana yang dieditnya ... itu maksudnya diisi sama kode apa :)

16/10/12 17.02 O

@mencintai dengan sederhanaCoba Sobat cermati dan pelajari ulang uraian di atas.

Setelah Sobat benar-benar memahaminya, maka dapat dipastikan Sobat akan menemukan jawabannya. :)

31/01/13 20.42 O

slmt malam mas, yang saya tau script itu buat meremove shadow buat template standart mas. thanks


derrybernicahyady.blogspot.com

31/01/13 23.24 O

@Derry Berni CahyadySepertinya Sobat belum membaca uraian di atas secara lengkap, terutama dalah uraian yang terdapat pada langkah yang kedua. :)

05/03/13 05.29 O

Mas mau tanya lagi...
saya sudah coba karna kesulitan cari kode langka pertama jadi meletakkan kodenya tepat di atas ]]>,
terus untuk kode marginya begini :margin-bottom: 90px auto 0px;
setelah di pratinjau tidak ada perubahan....tolong bantuannya mas terima kasih!
http://gioakram13.blogspot.com

05/03/13 05.35 O

Mas mau tanya...
Saya sudah mencoba karena kesulitan mencari kode langka pertama, jadi meletakkan kodenya tepat di atas ]]> untuk marginnya begini: margin-bottom: 90px auto 0px;
}
]]>
setelah di pratinjau belum ada perubahan! minta solusinya...
http://gioakram13.blogspot.com

05/03/13 06.07 O

@gio akramSobat, uraian jawaban telah saya tulis langsung pada kolom komentar salah satu artikel yang Sobat terbitkan.

Jadi Sobat dapat melihatnya secara langsung pada salah satu artikel Sobat.

Semoga dapat membantu. :)

08/03/13 06.32 O

Terimaksih banayk mas..
langkah2 yang disarankan sudah diterapkan dan berhasil...mas jika tidak merepotkan coba mas lihat lagi hasilnya kebetulan saya rubah marginnya menjadi :margin:50px auto 0px;} agar terlihat jelas! disitu ada garis hitam cara menghilangkannya gimana mas dan diganti dengan gambar kir2 berapa ukuran yang pas? dimaklumi mas terlalu banyak nanya jujur umur blog saya kurang lebih 3 bulan itupun terinspirasi karna banyak baca tips2 dari blogger salah satunya blog mas yang selalu saya ikuti infonya....!

12/03/13 23.54 O

@gio akramApabila yang Sobat maksud adalah garis hitam yang terletak di atasnya tulisan 'BELAJAR', maka silakan edit template kemudian cari CSS berikut ini:

.menuatas{width:880px;margin:0 20px;border:1px solid #555555;background:#555555;overflow:hidden;}

Nah, perhatikan bagian border:1px solid #555555; pada CSS di atas. Bagian inilah yang menghasilkan garis hitam pada bagian header, sehingga bila Sobat ingin menghilangkan garis tersebut maka bagian tersebut dapat dihapus atau bisa juga dengan cara mengganti value 1px menjadi 0px.

Dan terkait dengan ukuran gambar, saya rasa akan lebih baik bila Sobat sesuaikan dengan ukuran header. Dalam hal ini kalau saya tidak keliru ukuran lebar untuk header dari blog yang Sobat kelola adalah 880px.

04/04/13 05.21 O

Terimakasih mas da membantu...!

Anonim
17/04/13 20.03 O

thanks ya kang buat infonya..

19/04/13 00.49 O

@gio akramOke, sama-sama Sobat. :)

22/04/13 08.04 O

Masih belum work juga

29/04/13 00.48 O

@Majalah SiantarTeknik tersebut memang hanya berlaku pada penggunaan template standar Blogger, Sob. Jadi bila Sobat menggunakan custom template, maka bisa jadi teknik tersebut tidak dapat diterapkan. :)

29/04/13 00.49 O

@se-cara.blogspot.comTerimakasih balik, Sob.

14/06/13 14.39 O

Makasih Mas artikex, sebelumx sy bingung ngelihat antara header ke bar navigator kok jauh sekali, salam dari Makassar

15/06/13 13.45 O

@MUJAHIR KONGJOSama-sama Sob.

28/06/13 01.02 O

Dan kemudian walaupun saya menyadari sepenuhnya bahwa uraian di atas tidaklah ada artinya sama sekali bagi Anda yang telah terbiasa....< Hahahahahaaa!! saya sudah terbiasa tapi tetep gak ngeh! Bermanfaat sekali mas! Tengkyu!



28/06/13 10.34 O

@rxoroxr'Gan ngeh!' gimana Sob maksudnya?

29/12/13 11.28 O

saya mau tanya, jika jarak yang mau di ubah adalah antara postingan dengan menu pages yang di atasnya apa yang kita edit ya pak? saya tidak tau kodenya

30/12/13 09.26 O

@SinggihTerkait dengan hal tersebut tentu saja menyesuaikan dengan template yang digunakan Sob. Sebab masing-masing template kan memiliki CSS tersendiri.

Beda halnya jika template yang dipakai adalah template standar yang telah disediakan oleh Blogger, maka biasanya memiliki CSS yang sama.

Jadi apabila sekarang Sobat belum mengetahui kode yang mesti diubah, maka ada baiknya bila Sobat pelajari terlebih dulu template yang dipakai agar nantinya dapat dengan mudah melakukan modifikasi sesuai dengan yang diinginkan.

20/09/15 20.49 O

Bila mengatur jarak pada tampilan seluler bagaimana ya mas? Terimakasih!

20/09/15 21.53 O

@Denz Ahmad Secara prinsip sebenarnya serupa dengan teknik tersebut Sob. Dalam hal ini maksudnya yaitu tinggal mengubah bagian tertentu yang terdapat dalam CSS templatenya.

Namun begitu hal tersebut tentu saja harus disesuaikan dengan template yang dipakai serta desain yang diinginkan. Oleh sebab itu akan lebih baik dan menjadi lebih mudah dalam mengerjakannya bila Sobat mempelajari tentang penggunaan CSS.

23/10/15 11.05 O

saya sudah coba terapin tapi tidak berubah juga batas bawah sampe tepian browser, please help dong klo ada ada cara lain, mksh

blog saya : http://saliagu.blogspot.com

23/10/15 22.00 O

@Agus Salim Harap dicermati kembali bahwa teknik tersebut hanya dapat digunakan pada template standar yang telah disediakan oleh Blogger, Sob.

26/02/16 21.03 O

Informasi yang sangat bermanfaat gan :D

10/06/16 13.51 O

bro mo nanya.. klo buat ngatur area kosong untuk footer di area postingan gmn ya?? Soalnya blog saya widget di post areanya kok gak bisa muncul jd kosong gtu.. ini solusinya gimana ya?

10/06/16 22.38 O

@Seo Rangin Menurut hemat saya, inti dari masalah tersebut umumnya terletak pada CSS yang digunakan dalam template. Akan tetapi karena masing-masing template yang digunakan oleh seorang blogger memiliki karakteristik yang tidak sama, maka cara terbaik untuk mengatasinya yaitu dengan menelusuri divisi dari bagian yang dimaksud dan kemudian melakukan penyesuaian terhadap CSS-nya.

Oleh sebab itu ada baiknya bila Sobat telusuri terlebih dulu CSS yang digunakan pada bagian tersebut (contoh: gunakan fitur 'Inspeksi" yang terdapat pada Chrome atau Inspeksi Elemen yang terdapat pada Firefox) untuk selanjutnya lakukan perubahan sesuai dengan yang diinginkan.

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