Cara Membuat Template atau Widget Rata Tengah

on Thursday, January 24, 2013
Tutorial BlogspotCara Membuat Template atau Widget Rata Tengah. Terkadang tampilan blog kita menjadi berbeda jika dilihat dari layar dekstop yang lebih besar. Hal ini dikarenakan setting margin maupun padding yang manual, saat melakukan edit HTML. Nah bagaimana membuat template tampilannya selalu sama, meskipun blog dilihat dari berbagai macam ukuran layar dekstop pengunjung? berikut sedikit saya ulaskan.

Pada saat melakukan edit HTML pembuat template atau Anda yang sedikit mengerti coding CSS selalu berusaha membuat tampilan sepenuh ukuran layar dekstop Anda. Seperti penerapan margin-left:5px;margin-right:10px;margin-top:2px;margin-bottom:15px; Konsumen Cerdas Paham Perlindungan Konsumen

  • margin-left:5px; berarti membuat widget / template secara keseluruhan memiliki jarak 5px dari samping sebelah kiri. semakin tinggi nilainya membuat template semakin menjorok ke kanan.
  • margin-right:2px; kebalikan dari margin-left. Penerapan coding css ini membuat template menjorok ke kiri berjarak 2px dari tepi kanan template.
  • margin-top:10px; berarti template atau widget berjarak 10px dari atas. Setelah penerapan coding ini template atau widget menjorok ke bawah.
  • margin-bottom:15px: kebalikan dari margin-top, template atau widget memiliki jarak 15px dari batas bawah.

Nah dari penerapan ini, perubahan angka membuat tampilan template berubah, sehingga karena sang pembuat template atau Anda yang mengerti coding CSS akan selalu membuat tampilan blog menjadi sempurna (hanya berdasarkan ukuran layar dekstop Anda). Jika dilihat dari dekstop pengunjung lain yang lebih besar atau lebih kecil, membuat tampilan menjadi sedikit berbeda (belepotan), karena ukuran margin ini tetap, dan tidak bisa melakukan penyesuaian dengan ukuran layar dekstop pengunjung.

Contoh hasil modifikasi situs blogger-tamboranews saat dilihat dari layar dekstop yang lebih besar, template secara otomatis akan berada ditengah. Sebelum penerapan coding ini, template menjorok ke kiri dengan menyisakan halaman putih kosong disebelah kanan.

Cara Membuat Template atau Widget Rata Tengah


Cara Membuat Template atau Widget Rata Tengah


Untuk menyikapi hal tersebut, gunakan coding css margin:0 auto; Dengan menerapkan coding ini membuat widget atau template memiliki jarak 0 px utk kanan, kiri, atas, bawah. Atau dengan kata lain letaknya menjadi ditengah.

Cara praktek, hapus margin-left:5px;margin-right:10px;margin-top:2px;margin-bottom:15px; ganti dengan margin:0 auto; untuk edit HTML template, letakkan di body{}, header{}, main-wrapper{}, dan footer{}.

Untuk widget sidebar bisa menambahkan coding

<div style="margin:0 auto;">

..... (HTML Widget)

</div>

Demikian Cara Membuat Template atau Widget Rata Tengah.