Cara Mengganti Background Blog Dengan Gambar dan Warna

Mungkin seringkali kita merasakan tampilan background blog atau latar belakang blog kita yang itu itu saja,  terlintas dalam pikiran ingin merubah atau mengganti tampilan background dengan model yang lain bukan ?. Memang mengganti background blog atau mengubah gambar latar belakang blog bukan merupakan suatu hal yang harus diprioritaskan dalam membangun sebuah blog. Akan tetapi sah sah saja jika anda menginginkan untuk menggantinya  dengan tujuan menambah keindahan tampilan sebagai salah satu daya tarik blog anda.

Mengganti background template bawaan dari google mungkin tidak menjadi suatu masalah yang merepotkan, akan tetapi kebanyakan para blogger sudah menggunakan template blog dari pihak ke-3 (pihak ketiga) yang dianggap lebih seo. Dan tentunya kita juga dihadapkan harus dapat meng-edit kode HTML yang ada jika ingin mengganti latar belakang template tersebut.

Sebagai blogger pemula saya ingin berbagi cara mengganti background blog dengan latar belakang yang baru, saya akan membagi menjadi 2 kategori latar belakang, yaitu kategori background warna dan kategori background gambar.

Cara mengganti background blog dengan warna

Biasanya CSS body akan terlihat seperti model di bawah ini :

body {background : #FF0000;

----

----

}

cara mengganti warnanya adalah :

    1.  Login dahulu ke blog anda
    2.  Pilih Template pada menu blogger anda
    3. Pilih Edit HTML
    4. Cari kode yang mirip dengan kode di atas (cari dengan menggunakan Ctrl + F)

 seperti : body{background:#610B0B center top no-repeat;font-family: Arial, Helvetica, Sans-serif;font-size: 12px;margin:0px;padding:0px;}

    5. Setelah ketemu ganti kode di samping # (warna biru) dengan kode warna html yang telah anda tentukan    6. Klik pratinjau dahulu , lihat tampilan sementara apakah sudah sesuai dengan keinginan anda, jika ya silahkan anda save template, jika belum klik edit template dan silahkan diganti lagi kode  di samping # tadi, hingga warna backgroundnya sudah sesuai dengan keinginan anda.
Nilai dari #000000 dapat berbentuk seperti #6495ed atau #cccccc yang kita sebut kode hex (hexa) silahkan pilih mau menggunakan kode warna yang sesuai dengan keinginan, anda juga bisa melihat kode warna html untuk memilih kode warna yang anda inginkan. Jadi prinsipnya ganti saja kode warna CSS BODY pada attribut background tersebut.

Cara mengganti background blog dengan gambar

 Kembali lihat bentuk umum kode body adalah seperti di bawah ini :

body {background : url (http://3.bp.blogspot.com)
---
---
}

cara mengganti gambarnya adalah :

    1.  Login dahulu ke blog anda
    2.  Pilih Template pada menu blogger anda
    3. Pilih Edit HTML
    4. Cari kode yang mirip dengan kode di atas (cari dengan menggunakan Ctrl + F)

misalnya seperti di bawah ini :


body{background:#610B0B url(http://3.bp.blogspot.com) center top no-repeat;font-family: Arial, Helvetica, Sans-serif;font-size: 12px;margin:0px;padding:0px;}

ganti saja kode yang mirip seperti itu (warna biru ) sesuai dengan url gambar yang telah disiapkan.
Demikian artikel cara mengganti background blog dengan gambar dan warna, semoga dapat bermanfaat.

ara Mengganti Background Header Blog memang sangat mudah. Ini adalah artikel pelengkap dari artikel Cara mengganti background blog. Bisa anda baca Cara mengganti background blog

Kan rasanya kurang enak kalau hanya mengganti background blog saja. Sedangkan background header blog masih dalam keadaan kurang menarik. Jadi, mari kita coba bahas cara mengganti background header blog ini...

Background header blog tidak harus berupa gambar, bisa juga dengan menggunakan warna polos seperti blog saya ini. 

Header blog adalah bagian pertama yang dilihat oleh pengunjung. Jadi, ini bisa menjadi tolak ukur untuk menentukan apakah blog tersebut menarik, cukup menarik, ataupun tidak menarik.

Jika anda ingin membuat blog yang menarik. Anda bisa mengikuti langkah-langkah di bawah ini untuk mengganti background header blog.

Cara Mengganti Background Header Blog

OK, jadi mari kita mulai saja. Untuk cara mengganti background Header Blog itu ada 2 cara, yaitu:

• Melalui Edit HTML template, dan bisa juga
• Melalui menu tata letak blogger

Jujur dari saya, bahwa mengubah background header blog lebih enak dengan menggunakan edit HTML. Kenapa demikian? karena dengan menggunakan edit HTML, kita bisa leluasa untuk mengatur gambarnya. Seperti merubah ukuran header, merubah susunan gambar, mengubah susunan teks pada gambar, dan lain-lain.

Sedangkan mengubah background header melalui menu tata letak masih minim keluasaan dibangingkan mengedit dengan edit HTML. Tapi tidak ada salahnya juga untuk mengganti background header blog dengan menu tata letak.

Jadi langsung saja kita bahas kedua poin diatas...

Cara Mengganti Background Header Blog melalui edit HTML

• Login dulu ke akun blogger anda
• Masuk ke manu tempalate. Untuk menghindari kesalahan dalam meng-edit template sebaiknya anda backup dulu template anda. Cara nya dengan meng-klik cadangkan/pulihkan >> klik unduh template lengkap
• Klik Edit HTML
• Silahkan cari kode #header-wrapper
• Kodenya mirip seperti ini, silahkan anda ganti kode #header-wrapper dengan kode dibawah ini.

#header-wrapper{width:980px; height:196px; text-align:left; background:#272727 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-P2KDYUoKtSNjpkhROTZUvgjCiHSdTFji5g6b-x5GOam5uf0BFNrBSvlxNZioAw-wJDnhYuAW9ooVTBgTOCIIpmpmH6AScxjuOj01XLGJ6DVynye_oMV27b6qr93a4ikNGSevuM1j-A/s1600/background+blog.jpg) repeat-x; padding:0px}
Akan saya jelaskan lebih lengkap mengenai kode diatas..

1. width:980px adalah lebar gambar blog anda, bisa anda ganti sesuai selera dan ukuran header blog anda.height:196px adalah tinggi gambar blog anda, ini bisa anda ganti juga sesuai selera.
2. text-align:left adalah letak teks pada header blog anda, bisa anda ganti dengan text-align:right jika ingin teks berada di kanan, dan bisa anda ganti dengan text-align:centre jika ingin teks berada di tengah.
3. url(...) adalah url gambar anda, bisa anda ganti dengan url gambar yang lain.
4. repeat-x bisa anda ganti dengan no-repeat, jika tidak ingin ada pengulangan. Anda juga bisa mengganti dengan kode yang lain.
5. padding:0px juga bisa anda ganti sesuai selera.

• Setelah kode sudah tersusun dengan benar, anda bisa menyimpan template anda, dan silahkan lihat hasilnya...

Sekarang anda bisa melakukan cara yang kedua, yaitu..

Cara Mengganti Background Header Blog melalui menu tata letak

• Seperti biasa, masuk ke akun blogger anda
• Masuk ke menu tata letak
• Lihat dibagian widget judul blog, silahkan klik EDIT

• Nanti akan muncul window baru seperti ini

 

Akan saya jelaskan mengenai gambar diatas... Saya sudah memberi warna kotak pada setiap bagian

1. Warna kuning digunakan untuk mengambil gambar dari komputer anda, isi sesuai selera anda.
2. Warna merah digunakan untuk mengambil gambar dari sebuah url gambar, bisa anda isi sesuka anda.
3. Warna hijau adalah penempatan dari gambar, anda bisa pilih sesuai yang anda mau.

• Setelah anda mengisi dengan benar, silahkan klik SIMPAN
• Lihat hasilnya...

- See more at: http://seoterpadu.blogspot.com/2013/06/cara-mengganti-background-header-blog.html#sthash.5eJyIUiw.dpuf