Mengatur Margin dan Pandding Pada Blog

Mungkin bagi sebagian blogger di antara kita pasti ada yang sudah kenal dengan istilah margin dan padding dalam blog. Hal ini terutama dapat kita ketahui dari blogger yang gemar mengutak-atik template blog miliknya. Karena, secara langsung maupun tidak langsung saat kita memodifikasi template blog pasti akan berkaitan dengan margin dan padding blog ini.   
 
Mengatur Margin dan Pandding Pada Blog 
Margin dan padding blog berguna untuk mengatur tampilan dalam postingan blog kita. Dengan pengaturan margin dan padding yang pas, maka tampilan postingan dalam blog kita pun akan semakin terlihat menawan. Akan tetapi, saat kita salah dalam memahami dan memberikan pengaturan margin dan padding ini, bisa-bisa tampilan blog kita menjadi kacau, rumit, dan tidak sedap untuk dipandang mata.

Sebelum membahas mengenai margin dan padding, ada baiknya jika kita mengetahui terlebih dahulu apa yang dimaksud dengan border. Border merupakan garis yang membingkai postingan dalam blog kita. Biasanya kode HTML sebuah border berurutan mulai ukuran border, jenis border, dan warna border.

Contoh: border:1px dotted #000000;

Maksudnya adalah ;
  • Tebal garis border 1px.
  • Jenis garis border adalah dotted (putus-putus).
  • Warna border adalah hitam.

Margin.
Berdasarkan pada ilustrasi gambar di atas dapat kita ketahui jika margin merupakan jarak antara border dengan sisi luarnya.
Kode HTML untuk margin biasanya tertulis sebagai berikut ; 


margin:5px 6px 7px 8px;

Arti dari kode di atas yaitu ;
  1. Jarak setelah border dengan bagian luar sebelah atas adalah 5px.
  2. Jarak setelah border dengan bagian luar sebelah kanan adalah 6px.
  3. Jarak setelah border dengan bagian luar sebelah bawah adalah 7px.
  4. Jarak setelah border dengan bagian luar sebelah kiri adalah 8px.

Ukuran pada margin melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri. Selain itu, penulisan margin juga dapat dipisah menjadi satu per satu setiap bagian.


Untuk margin atas, kode HTMLnya adalah margin-top:5px.
Untuk margin kanan, kode HTMLnya adalah margin-right:5px.
Untuk margin bawah, kode HTMLnya adalah margin-bottom:5px.
Untuk margin kiri, kode HTMLnya adalah margin-left:5px.


Padding.

Padding merupakan jarak border dengan bagian dalamnya atau jarak komponen body dengan border.
Kode HTMLnya adalah sebagai berikut ; 


padding:5px 6px 7px 8px;


Arti dari kode di atas yaitu ;
  1. Jarak setelah border dengan bagian dalam sebelah atas adalah 5px.
  2. Jarak setelah border dengan bagian dalam sebelah kanan adalah 6px.
  3. Jarak setelah border dengan bagian dalam sebelah bawah adalah 7px.
  4. Jarak setelah border dengan bagian dalam sebelah kiri adalah 8px.

Ukuran pada padding juga sama seperti margin dengan melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri. Selain itu, penulisan padding juga dapat dipisah menjadi satu per satu setiap bagian.


Untuk padding atas, kode HTMLnya adalah padding-top:5px.
Untuk padding kanan, kode HTMLnya adalah padding-right:5px.
Untuk padding bawah, kode HTMLnya adalah padding-bottom:5px.
Untuk padding kiri, kode HTMLnya adalah padding-left:5px. 


Baca juga:





Junedalbughisy.blogspot.com|Sumber: panduan-belajar-blog.blogspot.com

6 komentar:

  1. Terima kasih mas bro, berhasil juga saya mengatur jarak border dengan judul artikel pada popular posts dengan padding :D, jangan lupa berkunjung ke my-topsite.blogspot.com.

    BalasHapus
  2. Makasih mas panduannya, udah ngerti sekarang saya :d

    BalasHapus
  3. thanks infonya gan
    backlink ya
    http://thazbhy.blogspot.com
    http://technogamecyber.blogspot.com/

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top