Tips Mengganti Background Blog

5/24/2018 Tips Mengganti Background Blog

1/6

Tips Mengganti Background Blog

Beberapa hari yang lalu, sobatUelmenanyakan perihal bagaimana caranya untuk menggantibackground blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua

kemungkinan mengganti background yaitu yang pertama adalah mengganti hanya warnabackground (latar belakang) saja, yang kedua adalah mengganti background blog denganmenggunakan gambar atau image.

Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latarbelakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuattulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, makapilihlah warna atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarnaterang, maka sebaiknya warna atau image background berwarna gelap. Tulisan yang susah untukdi baca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membacaartikel-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 asliblogger yaitu template minima.

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

5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warnamerah adalah kode yang harus di rubah) :
http://www.uelmaniez.blogspot.com/http://www.uelmaniez.blogspot.com/http://www.uelmaniez.blogspot.com/http://www.uelmaniez.blogspot.com/


2/6

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 Pratinjauuntuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template

8. Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program

photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui kodewarna.

Untuk template minima baru :

1. sign in


3/6

2. Klik menu Layout

3. Klik menu Fon 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 lihatperubahannya 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 sobat harus mempunyai file image. Image ini bisa berbentuk imaagebiasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untukmenyimpan gambar, saya anggap sobat sudah bisa melakukannya karena sudah saya bahas padapostingan terdahulu, atau masih bingung? kalau iya, coba baca kembalidi sini !

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

alamat gambarnya adalah
http://kolom-tutorial.blogspot.com/2007/05/buat-logo-button-image.htmlhttp://kolom-tutorial.blogspot.com/2007/05/buat-logo-button-image.htmlhttp://kolom-tutorial.blogspot.com/2007/05/buat-logo-button-image.htmlhttp://kolom-tutorial.blogspot.com/2007/05/buat-logo-button-image.html


4/6

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

gambarnya seperti ini :

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

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in

2. Klik menu Template


4.

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

5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yangharus 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;


5/6

font-size: /**/small;}


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 yangbekerja duluan warna background.

Untuk template minima baru :

1. Sign in

2. Klik menu Layout


4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untukbackup data

5. Klik kotak kecil di samping tulisan Expand Template Widget

6. Tunggu beberapa saat sampai proses selesai


6/6

7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yangharus 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;}


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 blog yang sudah saya pasang background dengan gambar yang sayacontohkan di atas, silahkan sobat klikdi sini !

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

Selamat mencoba !
http://random-banner.blogspot.com/http://random-banner.blogspot.com/http://random-banner.blogspot.com/http://squidfingers.com/http://squidfingers.com/http://squidfingers.com/http://squidfingers.com/http://random-banner.blogspot.com/

Tips Mengganti Background Blog

Documents

Transcript of Tips Mengganti Background Blog