Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel 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 sukai (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

    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 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 !

    Iklan

    3 Juli 2007 - Posted by | banner, blog tutorial

    32 Komentar »

    1. pertanyaan: warna background sdh saya ganti, disetiap sudut bagian2 blog, warna aslinya tidak bisa hilang, jadi tidak sedap dipandang, mohon petunjuknya mas, terima kasih sebelumnya.

      Komentar oleh UKMPA Edelweis FSUH | 4 Juli 2007 | Balas

    2. ganti semua alamat yg ada rounder nya dengan #000000; . contoh :
      background:url(“http://www.blogblog.com/rounders3/rails_main.gif”) repeat-y;

      ganti jadi seperti ini :
      background:#000000;

      sebelum ngedit jangan lupa download dulu template aslinya biar tidak beresiko

      Komentar oleh rohman | 4 Juli 2007 | Balas

    3. sudah saya ganti mas, secukupnya saja. makasih banyak atas petunjuknya.

      Komentar oleh UKMPA Edelweis FSUH | 5 Juli 2007 | Balas

    4. cool blog

      Komentar oleh William "Adam" Rose | 9 Oktober 2007 | Balas

    5. Assalamualaikum…suhu !!
      Makasih atas semua tutorialnya….semua bermanfaat bgt digunain buat belajar..
      Sekalai lagi makasih….

      Komentar oleh DJ BAIM ELEKTRO BLOGGER | 31 Oktober 2007 | Balas

    6. bagaimana kalo mau ganti background pada googlepages juga sama?

      Komentar oleh Anonymous | 4 November 2007 | Balas

    7. Hi bang rohman…menarik banget tip ganti warna backgroundnya, but ada 1 hal yang masih mengganjal dalam otakku, gmana sich caranya ngilangin title pada header atau ganti backgroundnya dengan image yang nindih title tsb?thanks for all.

      Komentar oleh KANG SOFY | 28 November 2007 | Balas

    8. bang kmarin sya coba masukin script hrisontal menu pada blog’s sya trus menunya emang kluar tapi warna background blog-nya ko’ bisa ilang yaaa…lebh jelasnya kunjungi blog ini “http://manuruljadid.blogspot.com” gmana nich!..thanks.for all

      Komentar oleh MADRASAH ALIYAH NURUL JADID | 30 November 2007 | Balas

    9. mas,gimana ganti kode urlnya utk ganti pattern yg kita download?

      Komentar oleh arif yulianto | 4 Desember 2007 | Balas

    10. di upload dulu gambarnya ke server tempat menyimpan gambar. silahkan baca tentang google page creator pada panduan nomor 105

      Komentar oleh rohman | 4 Desember 2007 | Balas

    11. Kang rohman, kenapa waktu saya mencoba mengganti bacjground nya gak bisa???? malah yang keluar tulisannya begini: Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: bgcolor. dan ketika saya mengklik pratinjau ada perintah untuk menutup window tersebut.

      Komentar oleh Anonymous | 13 Januari 2008 | Balas

    12. Kang rohman, kenapa waktu saya mencoba mengganti bacjground nya gak bisa???? malah yang keluar tulisannya begini: Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: bgcolor. dan ketika saya mengklik pratinjau ada perintah untuk menutup window tersebut.

      Komentar oleh didiet | 13 Januari 2008 | Balas

    13. @Didiet : itu berarti pada css nya di tulis string nya, tapi pada variabel tidak ditulis.. yg di sebut string yaitu ini :

      $bgcolor

      kalo ada kode itu, pada variable harus pula di tentukan, kalao bingung, mending langsung pake kode warna, contoh kode warna hitam :

      background:#000;

      kalo yang ini ga perlu ada variable..

      Komentar oleh rohman | 13 Januari 2008 | Balas

    14. Udah di coba mas, hasilnya bagus tapi kok gak bisa muncul kalo pake IE ya mas

      Komentar oleh frendli | 20 Januari 2008 | Balas

    15. mas saya sudah coba dengan cara diatas tapi ko keluar informasi seperti ini
      “Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
      Pesan error XML: The document type declaration for root element type “html” must end with ‘>’.”
      terus apanya donk mas
      tolong aku y???please ya?

      Komentar oleh ...::blog cah tkj::.. | 6 Februari 2008 | Balas

    16. kang,trims atas ilmunya utk mengganti image header,tapi seperti kang sofy ane di template klasik nggak bisa ngilangin header titlenya,gimana ya kang?thanks.

      Komentar oleh dedi | 3 Maret 2008 | Balas

    17. gantikan body bg kmu dengan
      script yg ada dibawah ini:
      (ingat salin dulu semua script htm kmu seperti tutorialnya kang rohman) karna jika terjadi apa2 saya tidak mau bertanggung jawab, tp script ini lancar.
      bagi anda yg kenal friendster tentunya gagh asing lg dengan script css di bawah ini:
      ok… lets play:
      gantikan script di HTML kamu yg seperti ini:
      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;
      }

      Dengan Ini:


      body {
      background:#000000 url(‘URL Pict kmu’);
      background-attachment: fixed;
      background-position: center-center;
      background-repeat: no-repeat;
      margin:0;
      color:$textcolor;
      font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }

      ganti url pict dengan pict kmu… bisa dalam format .gif.
      bila format pict kmu gif
      function no-repeat bisa diganti repeat

      jadinya keq begini:


      body {
      background:#000000 url(‘URL Pict kmu’);
      background-attachment: fixed;
      background-position: center-center;
      background-repeat: repeat;
      margin:0;
      color:$textcolor;
      font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }

      Selamadh mencoba……

      salam ama yg poenya blog dlu:
      sekedar sharing mas…
      saya mah juga masih awam atu ma yg namanya blog…
      di blognya Kang rohman cukup membatu saya. 😀 utak atik blog.

      thanks bang.

      Komentar oleh satriya_blog | 18 April 2008 | Balas

    18. tips and triknya bagus banget mas…banyak membantu saya dalam membuat blog…thanks banget yah

      Komentar oleh Anonymous | 8 Mei 2008 | Balas

    19. udah aku ganti background image…
      tapi ada sedikit permaslahan..
      kalo template kita g’ bisa transparan gimana?
      ada solusi biar template trasnparan…

      Komentar oleh Anonymous | 14 Mei 2008 | Balas

    20. Kang,saya bener bener matur nuwun,terima kasih..pokoknya blog ini sudah tak anggep kamus blogging saya. bingung ini bingung itu..langsung panggil kang rohman. weleh weleh,emang ok banget

      Komentar oleh Jack Al Gondhex | 29 Juni 2008 | Balas

    21. Kang, saya sudah berhasil ganti backgroundnya…
      Tapi yang saya mau kayak punya kang Rohman, warna backgroundnya hanya di area luar template saja.
      solusinya dong kang…

      Komentar oleh arman boneoge | 29 Juni 2008 | Balas

    22. Kang aku mengucapkan banyak terima kasih atas infonya tentang mendesain blog. banyak pelajaran yang aku dapat disini . makasih ya kang rohman

      Komentar oleh Sarwono .......................... | 21 Juli 2008 | Balas

    23. Kang Cara Menggabung Kan Foto 1 dan foto 2 untuk
      background saya gimana Pak ,,???

      MisaL foto 1 Gambar saya
      dan foto 2 gambar salju Yang Punya efek gerak ,,,

      gimana tuh Kang ,,??
      supaya gambar itu jadi nyatu ,,,

      biar foto saya bisa jadi ada salju nya gitu ?

      dan gimana cara cari url nya Kang ,,,
      bantu donK plz ,,,

      Komentar oleh poniman | 30 Juli 2008 | Balas

    24. Bos, gimana cara menempatkan deskripsi foto di samping image profile

      Komentar oleh leechen | 31 Juli 2008 | Balas

    25. makasih atas tutorialnya…

      Komentar oleh muhibbuddin | 8 Agustus 2008 | Balas

    26. aswr.
      terimaksih sekali ats informasi tentag blog, dan sangat membantu sekali, thanks

      oh ya saya mau nanya, gimana mengganti,warna yg asalnya sudah pink smua,hampir semua: kamdakaltim.blogspot.com
      terimaksih banyak

      gun (kalimantan timur)

      Komentar oleh Kammi Kaltim | 11 Agustus 2008 | Balas

    27. wah dah lama nih saya cari.. tks ya kang..

      Komentar oleh Rofi | 14 Agustus 2008 | Balas

    28. Tips nya sudah saya coba kang,
      mantap…
      makasih kang

      Komentar oleh Kami beserta Keluarga | 3 September 2008 | Balas

    29. makasih yach. tapi warna backgroun aslinya masih keliatan kan jadi gak enak diliatnya alias g matching gitu. gimana solusinya?

      Komentar oleh indra321 | 18 November 2008 | Balas

    30. makazih,.,sob,.,., tutorialnya,.,maklum baru pemula jadi bloger

      Komentar oleh imamgazpada | 27 November 2008 | Balas

    31. kalo mau buat backgrondnnya cm ada diatas gmana y?sejajar sm header

      Komentar oleh hendra | 18 Februari 2010 | Balas

    32. mas, tempate nya di daerah mana? di dasbor yg sebelah mana?

      Komentar oleh yogurthwithturtleflavour | 28 Maret 2010 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: