RSS

Sabtu, 04 Juni 2011

Tips mengganti background


Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang)
yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan
kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna
atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya
warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya
akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya
percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita
halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan
contoh adalah template asli blogger yaitu template minima.

Mengganti Warna Background

Untuk template minima klasik :

Sign in

Klik menu Template

Klik menu Edit HTML

Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :

body {
background:#fff;
margin:0z
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :


body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


Klik tombol Pratinjau untuk melihat perubahan
Jika sudah OK, klik tombol Simpan Perubahan Template
Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan
program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana
cara mengetahui kode warna.

Untuk template minima baru :

sign in
Klik menu Layout
Klik menu Fon dan Warna
Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah
di pilih lagi)
Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
Selesai.


Mudah bukan?


Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image
ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa.
hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya
anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan
terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !

Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar,
karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan
dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah
menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini
(ukuran gambar dalam ukuran aslinya) :

alamat gambarnya adalah

http://amen24.googlepages.com/pattern_096.gif

gambarnya seperti ini :





gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
dalam jumlah yang sangat banyak.

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

Sign in

Klik menu Template

Klik menu Edit HTML

Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :


body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar
apabila background image yang kita pakai gagal di loading oleh komputer pengunjung
blog, maka yang bekerja duluan warna background.

Untuk template minima baru :

Sign in

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :

body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Klik tombol Pratinjau untuk melihat perubahan

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Tidak ada komentar:

Posting Komentar