03 April 2015

Cara Membuat Blog Full Width

Full Width
Pada dasarnya apabila kita menggunakan template bawaan dari blogger mempunyai ukuran tampilan standar lebar(width) 960 px,dengan ukuran ini apabila kita lihat dengan menggunakan layar monitor yang model kotak / persegi akan terlihat pada sisi kiri maupun sisi kanan dari layar monitor masih ada space atau ruang yang kosong,nah disini dengan tema sesuai judul akan saya coba template yang ukuran standar ini saya sulap jadikan full width dengan ukuran 1000 px.
Dan mungkin apabila kita buat template dengan ukuran full width kita bisa lebih leluasa untuk membuat tulisan kita bisa lebih banyak dari yang ukuran standar,begitu juga untuk kolom widget / gadget bisa kita perlebar lagi ukurannya dari yang ukuran standar apabila dirasa ukuran yang standar kurang lebar.Baiklah sekarang menuju langkah pembuatan template sesuai tema yaitu template standar blogger untuk dijadikan full width.

Langkah pembuatannya 

Pertama pakai salah satu template yang simple bawaan dari blogger setelah itu pada dasboard blogger pilih Template dan pilih Edit HTML.Setelah tampil halaman HTML nya coba cari kata body,untuk memudahkan pencarian karena begitu banyak serangkaian kode pada halaman ini dan tentunya pihak blogger sudah jauh-jauh menyiapkan shortcut untuk pencarian yaitu dengan menekan tombol ctrl + f,untuk cara penggunaanya coba klik dimana saja asal didalam area kode-kode html kemudian tekan pada keyboard tombol ctrl + f maka akan muncul kotak pencarian yang posisinya berada di pojok kanan atas didalam area kode html,sekarang coba masukan kata
body
pada kotak pencarian kemudian tekan enter.
Pada body tersebut nanti yang akan dicari yang terlihat seperti ini tampilannya kira-kira
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Kemudian pada bagian
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
coba ganti dengan ini
padding: 0px;
Kemudian cari lagi kode ini
.content-inner
carilah kode tersebut yang terlihat seperti ini
.content-inner { padding: $(content.padding) $(content.padding.horizontal); }
apabila sudah ketemu coba ganti dengan ini
.content-inner { padding: 10px 0px; }
Selanjutnya cari lagi kode
.content-outer, .content-fauxcolumn-outer, .region-inner
ini biasanya berada diantara <b:template-skin> dan </b:template-skin>dan akan tampak seperti ini
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
coba pada bagian max-width: $(content.width); ganti dengan
max-width: 100%;
Kemudian cari lagi kode ini
]]> </b:template-skin>
dan tambahkan diatasnya kode ini
.main-outer { max-width: 1000px; margin: 0 auto; }
yang terakhir coba cari

]]> </b:skin>
kemudian letakan kode ini diatasnya
.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }
coba di simpan / save template.
Dan coba view blog... Hmmm jadilah Full witdh.
Begitulah kira-kira cara pembuatan  template full width,selamat berkreasi bagi yang suka Otak Atik.

Oke salam blogger.

4 comments: