Tips Mengganti Background Blog


Beberapa hari yang lalu, seseorang mengirim email kpd saya dan menanyakan perihal bagaimana caranya untuk mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti hanya warna background (latar belakang) saja, yang kedua adalah mengganti background blog dengan menggunakan gambar atau image.

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 :

    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 suka (yang warna merah adalah kode yang harus di rubah) :
    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; }
    7. Klik tombol Pratinjau untuk melihat perubahan
    8. Jika sudah OK, klik tombol Simpan Perubahan Template
    9. 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 :

    1. sign in
    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 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 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


    klik Saja..,



    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 kede Template, paste pada notepad lalu save untuk  backup data
    5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah  adalah kode yang harus di tambahkan) :
    6. 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; }
    7. Klik tombol Pratinjau untuk melihat perubahan
    8. Jika sudah OK, klik tombol Simpan Perubahan Template
    9. 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 sobat (yang warna merah  adalah kode yang harus di tambahkan) :
    8. 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. Klik tombol Pratinjau untuk melihat perubahan
    10. Bila sudah OK, klik tombol SIMPAN TEMPLATE
    11. 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 !

    Artikel Menarik Lainnya :

    Ditulis oleh Ant Adm - Selasa, Mei 18, 2010

    Belum ada komentar untuk " "

    Poskan Komentar

    Bukan member jg bs komen, Pilih Aja Name/Url.
    Urgent Comment Inbox aja ke Facebook.