KliniKomputer

Masih merupakan artikel dari rangkaian seri Membuat dan Memodifikasi Wordpress Themes. Jika pada artikel sebelumnya, saya telah berbagi tentang bagaimana mengetahui lebar (width) dari sebuah themes serta lebar content dan sidebarnya, maka pada artikel kali ini saya akan mencoba berbagi bagaimana cara mengatur lebar content dan sidebar pada sebuah wordpress themes. Saya tidak menggunakan sebuah themes sebagai contoh, namun saya akan berbagi secara umum sehingga teman-teman bisa langsung mencoba pada themes pilihan masing-masing.

Ada beberapa poin penting yang harus diketahui dalam mengatur lebar content dan sidebar, tiga di antaranya telah saya bagikan pada artikel sebelumnya yakni: lebar blog secara umum (wrapper), lebar content (container) dan lebar sidebar (sidebar). Selain ketiga hal tersebut, ada satu hal lagi yang harus diperhitungkan yaitu lebar lapisan kiri dan kanan yang dideklarasikan dalam statement padding.

Ukuran padding dibuat untuk menyatakan posisi sebuah bagian (yang dinyatakan dalam tag

Padding memiliki bentuk umum yaitu: padding : Toppx Rightpx Bottompx Leftpx; Jadi jika kita menemukan statement pada file style css yang berbunyi: padding : 5px 10px 0 15px; itu sama artinya dengan: padding-top: 5px, padding-right: 10px, padding-bottom: 0, padding-left:15px. Yang artinya bahwa bagian yang dideklarasikan mulai diletakkan pada koordinat 5pixel dari atas, 10pixel dari kanan, rapat dari bawah dan 15 pixel dari kiri.

Namun jika kita tidak ingin mendeklarasikan salah satu sudut maka lebih bagus jika menggunakan bentuk yang terpisah. Misalkan kita hanya ingin menyatakan bahwa bagian yang diberi sesuatu label dalam file css diletakkan 5 pixel dari kiri dan 10 pixel dari atas, maka perintah yang bisa kita pakai adalah: padding-left:5px; padding-top:10px; . Karena kita membicarakan lebar maka hal yang perlu kita ketahui adalah padding-left dan padding-right.

Sekarang kita mencoba hitung-hitungan untuk mengatur lebar content dan lebar sidebar.

Pertama-tama carilah elemen variabel global dalam label Wrapper. Ambil angka width pada statement css, kita misalkan kasih contoh 950px.

Nah sekarang kita bisa mengatur lebar content dan sidebar sesuka hati kita hahahaha. Caranya sederhana saja, tinggal masukkan berapa pixel yang kita inginkan sebagai lebar content kita dan angka tersebut kita kurangkan dengan angka lebar global yang kita dapatkan tadi yakni 950px untuk menjadi lebar sidebar.

Namun ingat bahwa jika jumlah antara width content dan width sidebar pas sama dengan jumlah width global, maka pastikan nilai padding left dan rightnya adalah 0. Namun jika pada statement container yang mengatur content kita ingin baris huruf pada content tidak terlalu rapat maka berikanlah angka seadanya namun tetap harus diperhitungkan. Pada umumnya perintah padding pada content hanya mencakup padding-top dan padding left, sedangkan pada sidebar umumnya mencakup padding-top dan padding-right.

Misalnya: pada content kita ingin jarak antara garis kiri dengan baris kalimat sejauh 10px , serta pada sidebar kita juga ingin jarak antara garis pembatas kanan adalah 10px maka jumlahnya adalah 20px. Jadi jumlah lebar content dan sidebar tidak boleh lebih dari:

Width Global (950px) - Hasil Penjumlahan Padding (20px) = 930px

Nah itu artinya jumlah lebar content dan sidebar tidak boleh lebih dari 930px. Jika lebih maka bisa jadi sidebar akan terletak berada di bawah content.

Perlu diketahui juga bahwa sebisa mungkin ketika menulis sebuah artikel, hindari memasukkan gambar yang lebarnya lebih dari ukuran lebar content. Jika ada kejadian yang mengakibatkan sidebar terletak tidak pada tempatnya atau terletak di bawah content maka periksa dulu lebar content apakah sesuai dengan yang saya sebutkan di atas.

Jika masih bermasalah, itu artinya di dalam artikel kita terdapat perintah-perintah yang terbawa dan menambah lebar content. Ini terjadi jika kita mengcopy sebuah artikel dari blog lain atau dari Microsoft Word dan langsung mempastekan ke dalam layar editor. Cara mengatasinya adalah cut isi artikel tersebut (jangan dari window HTML tetapi dari window Preview) lalu pastekan ke NOTEPAD. Setelah itu copykan lagi artikel yang ada di notepad tersebut ke dalam layar editor.

Selanjutnya saya akan mencoba berbagi tentang pengaturan sidebar, baik itu menambah jumlah sidebar, maupun memodifikasi sidebar seperti yang terlihat pada sidebar blog ini.

Hargailah karya orang lain, dengan hanya memodifikasi themes yang designernya telah memberi ijin untuk dimodifikasi. Walaupun begitu, tetaplah membaca aturan bagian mana saja yang boleh dan yang tidak boleh dimodifikasi.

Manfaatkan Wordpress Offline untuk melakukan percobaan pada saat membuat dan memodifikasi wordpress themes.

Postingan Tutorial Wordpress Themes sebelumnya :

• Wordpress Offline bagian 1.
• Wordpress Offline bagian 2.
• Pengenalan Struktur Files Wordpress Themes.
• Persiapan Membuat dan Memodifikasi Wordpress Themes.
• Modifikasi Header Wordpress Themes.
• Modifikasi Header Title Wordpress Themes.
• Mengetahui Lebar Themes.