Ada satu hal yang selalu dianggap penting apabila Anda berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan Anda menjadi susah untuk dibaca. 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 dibaca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang Anda tulis, dan tentunya percuma saja Anda memposting artikel jika tidak ada yang mau untuk membacanya. Oke, biar tidak menyita halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan dijadikan contoh adalah template asli blogger yaitu template minima.
- Mengganti Warna Background
Untuk template minima klasik:
1. Sign in.
2. Klik menu Rancangan.
3. Klik menu Edit HTML.
4. Copy seluruh kode Template, paste pada notepad lalu save untuk backup data.
5. Rubahlah kode warna asli template dengan kode warna yang Anda sukai (yang bercetak tebal adalah kode yang harus dirubah):
body {
background:#fff;
margin:0;
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;
}
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah Oke, klik tombol Simpan.
8. Selesai.
Jika Anda kebingungan tentang kode warna, Anda bisa mencarinya via Google Search masukkan kata kunci "kode warna"
Untuk template minima baru:
1. Sign in.
2. Klik menu Rancangan.
3. Klik menu Template Designer.
4. Pada gambar teks area sebelah kiri, pilih yang warna latar belakang halaman (biasanya yang pertama langsung ada, jadi tidak usah dipilih lagi)
5. Klik warna yang Anda sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN.
7. Selesai.
Mudah bukan?
- Mengganti Background Dengan Image
Hal yang pertama tentu saja Anda harus mempunyai file image. Image ini bisa berbentuk image biasa, foto, bahkan animasi pun bisa. Hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar.
Untuk ukuran gambar, Anda 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. Gambar tersebut akan tampil memenuhi layar karena akan ditampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut ini!
Untuk template minima klasik:
1. Sign in.
2. Klik menu Rancangan.
3. Klik menu Edit HTML.
4. Copy seluruh kode Template, paste pada notepad lalu save untuk backup data.
5. Tambahkan kode berikut pada style sheet css Anda (yang bercetak tebal adalah kode yang harus ditambahkan):
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;
}
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah Oke, klik tombol Simpan .
8. Selesai.
Kode warna background sengaja tidak dihilangkan, ini dimaksudkan agar apabila background image yang Anda pakai gagal diloading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.
Untuk template minima baru:
1. Sign in.
2. Klik menu Rancangan.
3. Klik menu Edit HTML.
4. Klik tulisan Download Template Lengkap, silahkan save dulu template Anda untuk backup data.
5. Klik kotak kecil di samping tulisan Expand Template Widget.
6. Tunggu beberapa saat sampai proses selesai.
7. Tambahkan kode berikut pada style sheet css Anda (yang warna merah adalah kode yang harus ditambahkan):
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;
}
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah Oke, klik tombol SIMPAN.
10. Selesai.
Anda dapat melakukannya, karena tidak banyak kode yang harus ditambahkan.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar