Ubah Background Template

Salam & Selamat Sejahtera

Kali ini aku nak kongsikan 1 lagi ilmu godek berpandukan pada member yang menanyakan tentang cara mengubah background blog. Apa yang dipraktikan di sini ialah pengubahan template untuk Minima Blogger Template.

Ok, di sini memerlukan beberapa langkah.

1) Cari kod seperti di bawah

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kemudian tukarkan tulisan merah kepada background: #000;

Dan bila korang preview blog, blog korang akan jadi seperti di dalam gambar di bawah:-

p/s: untuk ubah warna pergi ke sini dan ubahkan tulisan hijau(kod hex) background: #000;


2) Cari kod

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Kemudian tambahkan kod warna merah ke dalamnya.

#outer-wrapper {
background: #ffffcc;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Preview dan blog korang akan jadi seperti gambar di bawah:-




Untuk ubah warna :-

header cari kod

#header-wrapper {

Blog post cari kod

#main-wrapper {

Sidebar cari kod

#sidebar-wrapper {

Masukkan kod ini background: #ffffcc; selepas kod-kod bahagian mana yang korang nak ubah. Ingat mesti tukar tulisan hijau mengikut warna korang.

3) Masukkan gambar sebagai background blog

Pastikan gambar yang hendak digunakan bersaiz 1024 x 768 jpg file. (meliputi seluruh blog)

Ok di sini aku akan gunakan imageboo.com sebagai platform gambar yang akan di uploadkan.
Setelah korang uploadkan gambar korang, sila gunakan link seperti "http://imageboo.com/contoh.jpg"

Kemudian korang pergi ke Layout >> Edit HTML.
Cari kod

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Tukarkan kod merah kepada

background:#fff url("direct URL of the image");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;

Tukarkan link gambar korang yang telah diuploadkan tadi.
Preview dan jika memuaskan, korang boleh save template blog korang.

Arios...