Tuesday, May 19, 2009

Mengganti Template

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



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

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.



Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat klik di sini !

Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.


Selamat mencoba !

No comments:

Post a Comment