Tutorial Menambah Kelebaran Blog

Atas pertanyaan salah seorang pembaca blog ini. saya sediakan tutorial ini. Tutorial kali ini, saya kelaskan sebagai pengubahsuaian element dalam blog.

Ramai yang memilih template kerana warna, gambar dan sebahagiannya kerana layout template tersebut. Satu lagi yang perlu anda fikirkan adalah 2 jenis template iaitu:-

•  FLUID width atau STRETCH templates - template ini adalah sesuai untuk apa jua saiz  resolusi sesebuah monitor komputer. Ia akan melebar atau "mengecil" mengikut resolusi monitor yang digunakan. Kebaikannya jelas dan kelemahannya adalah untuk "DESIGN". Untuk blog profesional, amat sesuai tetapi tidak untuk blog yang lebih kepada "Personal".
• FIXED width - Template yang telah dibuat untuk "tetap" bagi satu resolusi sahaja. Sesuai untuk DESIGN dan CUSTOMIZING tetapi keburukannya tidak menepati untuk semua monitor komputer. Pelawat mempunyai saiz monitor yang berbeza dan juga resolusi monitor yang berbeza. Jadi, blog  anda akan kelihatan berbeza untuk setiap resolusi.
  

Banyak blog menyediakan tutorial seperti blog ini. Menyebut tentang modifikasi blog. Asasnya adalah pengetahuan serba sedikit tentang HTML dan javascript. Masalahnya, ada beribu jenis template yang mempunyai "kisahnya" sendiri. Adakala, di dalam tutorial menyuruh anda mencari tag tetapi tag itu tidak terdapat dalam template anda. Jangan bimbang. Asas bagi pembinaan template adalah sama walaupun mempunyai tag yang berbeza. Setiap template mempunyai pola yang sama, tulang belakang, boleh dikatakan tatacaranya adalah sama.

Persoalannya, "Perlukah Anda Menukar Kelebaran Blog Anda?"
Terpulang pada anda. Ada yang mengatakan, resolusi terbaik untuk sebuah blog adalah "Resolution Friendly". Iaitu resolusi yang tidak melebihi 750px kelebarannya. Ini kerana majoriti pengguna atau pelawat menggunakan resolusi 800x600px untuk resolusi "monitor" komputer. Jadi, jika anda menetapkan kelebaran blog anda melebihi resolusi tersebut, mereka ini terpaksa "scroll" ke kiri dan ke kanan muka blog anda.

Kesannya, pelawat golongan ini akan merasa bosan dan blog anda mungkin akan kehilangan mereka. Jadi, terpulang pada anda untuk menetapkan sendiri kelebaran blog anda.

Ok. Kita pergi langkah-langkah untuk menambah kelebaran blog. Saya mengambil contoh untuk template MINIMA. Pergi ke Dashboard >> Layout >> Edit HTML.
Cari dalam Edit HTML tersebut untuk bahagian yang menetapkan nilai untuk kelebaran "Main section", "Post sections", "Sidebar", "Header Section" dan "Footer". Bagi template MINIMA, kodnya seperti di bawah:-

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

..................................

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

..................................

#main-wrapper {

width: 410px;

float: $startSide;

..................................

#sidebar-wrapper {

width: 220px; float: $endSide;

..................................

#footer {

width:660px;

clear:both;

Di sini, kita dapat lihat bahawa template MINIMA telah disetkan dari asal kelebarannya adalah 660px untuk header-wrapper, outer-wrapper (Post section + Sidebar + Margins) dan juga footer.

Template MINIMA dan juga kebanyakan template lain, Elemen dikategorikan dengan nama yang berikut:-

<>header-wrapper - Bahagian "Header"
<>outer-wrapper - Bahagian utama dan segala elemen-elemen lain termasuk di dalamnya.
Ibarat ianya adalah "pembungkus" untuk semua elemen.
<>main-wrapper - Bahagian post.
<>sidebar-wrapper - Bahagian tepi post.
<>Footer - Bahagian bawah (Footer)

Template MINIMA dan elemennya:-

Dalam kes ini, saya ingin melebarkan lagi "Post section" (main-wrapper).
Saya ingin tambah kelebarannya sebanyak 90px menjadikannya 500px (asal 410px).
Dan untuk itu, saya juga MESTI melebarkan "pembungkus" (outer-wrapper) daripada 660px kepada 750px. Saya tidak mengubah saiz tepi post (sidebar-wrapper) iaitu 220px.
Saya juga mengubah saiz untuk "Header" (header-wrapper) dan bahagian bawah (footer) daripada 660px kepada 750px (tidak perlu jika anda tidak mahu mengubahnya).

Formulanya: Lebar blog=750px
<>500px (main-wrapper) + 220px (sidebar-wrapper) + jarak antara elemen (margin) = 750px

Klik "save templates" dan anda selesai. Saya mencadangkan anda mengubah satu persatu untuk setiap bahagian dan kemudian lihat di bahagian "Page Elements" atau preview blog anda. Jangan ubah sekaligus melainkan anda benar-benar faham. Apa pun, "backup template" anda dulu sebelum sebarang modifikasi. Jika ada masalah, anda boleh upload template anda yang asal semula.