Cara Mengganti Background Blog

Saya pernah melihat beberapa blog yang menggunakan teknik ini. Contohnya saja blog guru saya (Pak Ronald). Kita dapat mengganti background dengan warna, atau dengan gambar/pattern.

Ada satu hal yang saya anggap penting apabila anda berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang 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. Nah, langsung saja ke tutorialnya.

Mengganti Warna Background

Untuk template minima klasik : 

1. Sign in


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data (untuk jaga-jaga)


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


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 OK, klik tombol Simpan Perubahan Template


8. Selesai.

Jika anda kebingungan tentang kode warna, anda bisa membuka posting sebelumnya tentang Kode Warna pada HTML


Untuk template minima baru : 

1. sign in


2. Klik menu Layout


3. Klik menu Font dan Warna


4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)


5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah


6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN


7. Selesai.

Mudah bukan? 

Mengganti Background Dengan Image

Hal yang pertama tentu saja anda harus mempunyai file image. Image ini bisa berbentuk image biasa, photo, bahkan animasi pun bisa. 

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 : 

1. Sign in


2. Klik menu Template


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 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;
}
6. Klik tombol Pratinjau untuk melihat perubahan


7. Jika sudah OK, klik tombol Simpan Perubahan Template


8. 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 : 

1. Sign in


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat 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 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;
}

8. Klik tombol Pratinjau untuk melihat perubahan


9. Bila sudah OK, klik tombol SIMPAN TEMPLATE


10. Selesai.

Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat contoh nya, buka saja http://norlandmixed.blogspot.com

Dan juga, bagi anda yang malas membuat gambar, anda bisa mendownload berbagai gambar pattern di sini. 


Selamat mencoba ! 

Share