Menambah Lebar Bagian Outer,Main,Dan Kolom Sidebar
Oleh
Meskipun di dalam blogspot atau blogger sendiri telah disediakan aplikasi untuk merubah dan meng-customize template seperti dalam postingan saya yang ini Merubah Tampilan Blog Dengan Perancang Template, tapi ketika saya perhatikan banyak para blogger ,untuk meng-customize atau merubah tampilan template melakukannya secara manual yaitu dengan merubah dan menambahkan kode2 CSS dan HTML dalam menu Edit HTML.
Tadinya saya pikir buat apa cape-cape menuliskan kode-kode untuk merubah template, cuma bikin pusing saja mending pake Perancang Template, cuma klik sana sini jadi deh . Tetapi dikarenakan rasa penasaran karena begitu banyaknya para blogger yang membuat tutorial tentang blog tidak menggunakan Perancang Template, akhirnya saya coba dengan mengikuti petunjuk2 yang diberikan , eeh ternyata punya keasyikan dan kepuasan tersendiri setelah mencoba mengutak atik melalui kode2 CSS dan HTML.
Disamping itu juga dengan cara ini aku sedikit2 belajar mengenal kode2 html meskipun sedikit dan secara otodidak, dan inilah posting pertama yang aku coba dalam merubah tampilan template blog dan seterusnya mungkin akan menggunakan cara yang ini .
Pertama aku mencari template minima sebagai bahan untuk ku modif. Setelah dicari kesana kemari akhirnya ketemu di dalam menu Edit HTML disini letaknya.
Seperti terlihat di gambar yang ditunjuk tanda panah, tinggal klik maka akan menuju pada template Tata Letak . Seperti berikut tampilannya..
Untuk kembali ke menu Edit HTML, ya tinggal tekan Edit HTML.Pilih yang dilingkari dengan memberi tanda tik, kemudian Klik Simpan Template di bagian kanan atas.
Di dalam menu Edit HTML ini terdapat kode2 CSS dan HTML
Langkah pertama yaitu ingin memperlebar kolom template,untuk itu aku cari kode CSS untuk bagian Content yang terdiri dari Outer, Main, dan Sidebar. Untuk itu aku cari dulu kode untuk Outer, cari kode yang seperti ini..
/* Outer-Wrapper
---------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
/* Outer-Wrapper
---------------------- */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Biasanya lebar kan identik dengan width, nah untuk merubah lebarnya tinggal ganti saja nilai yang ada dalam property width misal dengan nilai 950px, jadi nanti nilainya seperti di bagian kanan itu bila menggunakan browser Firefox, untuk browser selain Firefox terlihat dibagian bawah. Untuk nilai ini tidak melulu harus dalam pixel bisa juga dalam persen (%), tapi kayaknya aku lebih senang menggunakan nilainya dalam pixel.
Setelah kolom outer di perlebar kini tinggal kolom main dan kolom sidebar untuk ubah lebarnya mengikuti kolom outer, sebab kedua kolom ini letaknya di dalam kolom outer. Jadi perlu sedikit penyesuaian supaya tidak ada ruang yang kosong. Kode untuk main dan kolom sidebar seperti dibawah :
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden; }
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden; }
#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word;
overflow: hidden; }
#sidebar-wrapper {
width: 320px;
float: $endSide;
word-wrap: break-word;
overflow: hidden; }
Kode yang sebelah kiri merupakan kode default dari template Minima, sedangkan yang sebelah kanan merupakan kode yang telah diubah nilai lebarnya . Lebar dari kedua kolom ini telah disesuaikan dengan lebar kolom outer , jadi ganti nilai width kode yang di kiri dengan nilai width kode yang di kanan atau bila menggunakan browser selain Firefox terlihat di bagian bawah .
Berarti proses menambah lebar bagian outer, main, dan sidebar telah selesai dilakukan. Supaya hasil perubahannya di proses tinggal klik Simpan Template .
+
1 komentar:
terima kasih
Posting Komentar Untuk Artikel Ini :