Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot

memasang header blog
Cara ini digunakan untuk mengubah/menambahkan gambar header secara keseluruhan sebagai background/latar. Jika hanya ingin mengganti/memasang gambar header pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambar anda melalui fitur upload yang telah disediakan.
click to enlarge
Namun untuk mengganti seluruh bagian backround/latar wrapper header di blog anda, gunakan cara berikut:

1. Masuk ke Edit HTML.
2. Cari  (Ctrl+F) #header-wrapper atau yang sejenisnya (masing-masing template tidak sama tergantung basic template tersebut). Declarator ini selalu di bagian pengaturan header dan posisinya paling atas.
Contoh:
#header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)
3. Tambahkan atribut ini sebelum background-color (atau anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar):
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat; 
contoh jadinya:
#header-wrapper{ 
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat;
background-color: #00000;
width:975px;margin:0 auto 0;height:125px;)

Atau aturan shorthand untuk background juga dapat digunakan:
background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #000000;
contoh:
#header-wrapper{background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #00000; width:975px;margin:0 auto 0;height:125px;)
Ganti http://alamat-url-gambar/gambar.jpg dengan direct url dimana anda mengupload gambar  header blog. Sebelum mengupload & memasang gambar header, edit atau pastikan ukuran gambar sama dengan width dan height header blog.
4. Save template.

Jika ada pertanyaan, permasalahan, atau apa saja, silakan gunakan form comment.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 124 Comment(s):

Yoddy "Dyta" Kelo Jr said...

kok di edit html saya g ada y mas??
tlng bantuannya..
thx

Ahmad Khoirul Azmee said...

Yang tidak ada kode apa?

Yoddy "Dyta" Kelo Jr said...

#header-wrapper nya mas...
td udah aq cari pake ctrl+f tp g ada tuh mas?...

maklum mas masih cupu jd masih rada binggung..

mohon bimbingan & bantuannya y mas..

Yoddy "Dyta" Kelo Jr said...

gini mas..aq mau masukin hasil kode html yg aq buat di www.cooltext.com bt aq pasang di font header..aq udh ikut panduannya mas Ahmad..tp giliran masukin di edit html malah g ada tuh mas..udh aq search pake ctrl+F tp jg g ada..jd binggung hrs masukin kodenya dimana..

Ahmad Khoirul Azmee said...

setelah saya liat, aturan css header and tidak mengunakan id #header-wrapper.
cari ini:
.header-outer {
margin: 0 0 0 0;
background: transparent none repeat scroll 0 0;
}

masukkan url gambar yg telah diupload sesuai dengan cara yang telah diuraikan di posting.
pada bagian background yang saya cetak miring ganti atau tambahkan aturan seperti contoh di atas jg. Buat width/lebar dan height/tinggi sesuai dengan ukuran pixel gambar.

Yoddy "Dyta" Kelo Jr said...

trima kasih mas Ahmad atas bantuannya..

oh iya mas, mohon bimbingannya ya..saya baru belajar dalam dulia bloging..

dari pertama kali saya bloging, situs blog mas Ahmad jd referensi saya.

klo mas Ahmad g keberatan saya bisa minta Alamat email mas Ahmad?untuk share dan berguru.hehe..

thx B4

Arienovich said...

Makasih atas tips2nya.. Visit my blog http://arieeraya.blogspot.com

Dierga said...

Judul headernya emang harus di isi ya ?

Unknown said...

ya, itu untuk memberi title blog

Anonymous said...
This comment has been removed by the author.
Anonymous said...

nggak bisa mas sulit,q dah coba beberapa kali tetap nggak bisa

Tubagus Ismail said...

saya coba gan.....

Ekanita said...

makasih mas.... infonya.

kta said...

jadi berat ngga gan loading blognya?mohon petunjuk..makasi

Warna Warni Wawasan said...

manfaat banget nich postnya..

Demolisher said...

mas ..saya masih belum ngerti..setelah ctr+F..ko gak bisa muncul muncul ya

Satria Baja Hikam said...

asslm....
mas kalau kasusnya headerq pake fto tu gmn?jadi untuk judul blognya udah paten meski dh ganti nama blog.fotonya tu bawaan template.jadi q cm bs ganti nama jg pk foto.solusinya menurut mas gmn?
o y...mampir jg d blogQ y...thanks

gusse guanthenk said...

bagaimana membuat blog-wrap seperti blog ini ?

request artikel MODIFIKASI TEMPLATE BLOGSPOT (Background, main, footer).

eko marwanto said...

ilmunya aku coba dulu mas. aku coba edit header qu, pertamanya dia ngelink ke sini :
http://1.bp.blogspot.com/-Z0DPwnf-Leg/TrltSDNgeWI/AAAAAAAABCU/nDvkeEQ7q4c/s1600/bg_header.PNG
ternyata warna putih, terus aku gak mau ganti gambar cuma mau ganti warna doang, apa perlu kita upload image juga seperti link yg di atas, atau hanya kita kasih kode css warna

Anonymous said...

informasinya sangat bermanfaat sekali, salam kenal and visit me back

Catatan darmanto said...

Ikut nyimak tips nya pak,sangat bermanffat buat saya.maksih pak,salam kenal ya...

vlog media news said...

wah mantap gan!

Ela said...

Asyiiiikk...udah sukses ganti gbr header...trims for your share

TedyRizaldi said...

Mas saya pengen nanya nih header yg mas pke di atas itu ^^ ukurannya brp? keknya sama ama Blog saya itu ukurannya

DbanditS said...

thx gan, ane bru belajar ni.....

LOmBoK diHaTi said...

Trnyata ribet jg ya ganti header diblogspot, nggk kek diwordpress, gampangg :-D

Salam knal aLL

anwarabe said...

gan kalo pengen kasih headernya pake flash atau format *.swf bijimana??yang diatas kan untuk format jpeg :bingugng

Unknown said...

agak panjang sob, penjelasan dan kodenya. Jadi nanti ke depan saya posting saja ya di blog. Ini antrian artikel pesanan sobat yang lain juga banyak sekali, jadi nanti ditunggu dulu ya.,, :)

hermansyah putra siregar said...

gan ane newbie
edit html dapat dimana yah?

Unknown said...

Darii dashboard blogger > Deign/Layout (kalo dashboard ) baru pilih "template") > Edit HTMl?Edit Template

hermansyah putra siregar said...

udh dapat bos,
trus kasus gua sama dengan agan yodyy, ga ada #header-wrapper nya bos :)
mohon pencerahan.

eksperimen said...

Bagaimana kalo membuat daftar kategori kaya di blog ni?

WILDAN MAHLIQ LS said...

klo sy mau ganti logo bgmn ya gan?

Admin said...

Cari gambarnya di mana?

Anang Nggohele said...

kalo pake template xml bisa gak ??

Anonymous said...

Thanks infonya...

GimoAdi said...

Trims,ternyata saya harus banyak belajar.....

MikeTven said...

ko azmi mau tanya nih , metode yg saya gunakan untuk cara diatas(artikel) Css Style keq gini;

#header
{
background-image:url(http://i1267.photobucket.com/albums/jj544/Michael_Steven1/header_5.jpg);
background-repeat:no repeat;
width:1000px;margin:0 auto 0;height:150px;)
}

tapi koq diatas gambarnya ada celah kosong gitu jadi keliatan kga bagus... mohon bantuannya yah

Blog : "Ideas for Life"

Unknown said...

itu berarti masih ada elemen wrapper lain selain wrapper nya header, atau kalo tidak tinggi gambar enggak sesuai dengan tinggi yang kamu buat di atas (kurang dari 150), coba height nya tidak usah dispesifikasikan saja, jangan kasih nilai height, cukup width saja and liat gimana hasilnya.

Scanner Barcode said...

Hmmm.... ini yg dicari-cari.. Saya coba dulu deh Admin... Makasih ya,Maju Terus Blogger Indonesia..!!!

Goodbox said...

bagus mas ,, tapi klo baground nya mau sama seperti blog mas bagai mana caranya mas,, tolong ya,,
alamat blog aku ini mas
http://abangdaka.blogspot.com/

Anonymous said...

Thanks agan sudah berbagi. sudah brhasil juga di blog ane. mohon dukungannya sobat di kontes ane di keretaminiku.com produsen kereta mini mainan di indonesia. sebelumnya thanks atas artikeelnya.

Anonymous said...

makasih infonya

Call me Salsa said...

nggak mudeng bangeetttt...
mohon bantuannya..

farhan said...

gan kalau cara mengubah lebar backgraund gimana?
mohon bantuan nya

Wawan Setiawan said...

Mau tanya, ko' di template sy ga ada :
1.#header
2..header
Mohon pencerahan.
http://reloaduit.blogspot.com/
bungsuputera@gmail.com

Unknown said...

CSS header pada blog anda menggunakan class: .header-inner
jadi cari .header-inner

Bacaan Unik Aneh Menarik said...

Makasih infonya gan. ane bingung nyarinya..akhirnya ketemu juga.. mantap

Anonymous said...

gan tolong dibantu gan,,
saya mu ganti header dengan gambar cuman gak pakek alamat URL bisa gak gan,,,

mohon pencerahnnya gan
http://didalamrenunganku.blogspot.com/
http://belajar-untuksukses.blogspot.com/

Anonymous said...

gan aku bingung nih mu di tarok di mana,,,
mohon bantuannya gan,,

http://didalamrenunganku.blogspot.com/

Adhe IlhaMm said...

SUMPAH Gan Ane Kagak Ngerti ne ..
Masalah nya ane kan baru NEWBIE :D..
Tolong Dong Share Video Atau Screenshot yang jelas ..
please gan ..
ane dah 2jam ne mondar mandir di blog agan ..
tetap ajah Bingung and Kagak ngetir2 :(
Tolong Dong Panduan ya gan :)
my blog: adhe-silawane.blogspot.com

whenysfitria.blogspot.com said...

aku bingung ni kok headerku aku ganti dengan gambar yang kerlip2 kok kerlip2nya nggak bisa ya, dia hanya diam saja,
tolong bantuannya ya..........
makasih.......... :)

Motor matic injeksi irit harga murah said...

Sudah berhasil saya pasang bang, makasih.......

Nawawi said...

terimakasih gan..
sangat berguna :D

INFO UNIK DAN MENARIK said...

makasih info nya gan,,

Mohduro said...

Trims bro, sdh dibantu

BOBOTOH [̲̅̅c̲̅][̲̅̅r̲̅][̲̅̅e̲̅][̲̅̅a̲̅][̲̅̅t̲̅][̲̅̅i̲̅][̲̅̅v̲̅][̲̅̅e̲̅] said...

blogwalking gaannnnn

Bima said...

terima kasih ya om.... singgah ya
di http://warung-bintaro.blogspot.com/

xamthone plus said...

terima kasih gan, ane tuggu rahasia selanjutnya deh !

Blogger Galau said...

maksih gan infonya.... patut di coba...

joko prasetyo said...

thanks gan info nya
walupun agak bingung gan ngedit nya
hahahaa
vist my blog gan
http://satudpajak2011.blogspot.com/

Dellibelitelli Frincy-ntjoef said...

info yg saya cari di search google.. Ternyata ada disini. Izin kendali bos, mau coba_coba neh.
And..
Makasih infonya..
Sukses slalu kang azmi.

Faceless Generation said...

thanks infonya...sangat bermanfaat...http://hengkycandra.com

Hadifatih said...

wah bagus gan infonya,
trims ya...

salam,

boem bethem said...

thanks gan, sangat bermanfaat, kunjungan balik ya :)

http://boem-bethem.blogspot.com

Unknown said...

asik nich .. http://adf.ly/A9Z18

admin said...

mantep infonya
salam sukses
www.gunung-air.com

Admin_Proxter said...

kk, tolong dong bantu saya kok tetep gak ada gambarnya ya... saya sudah letakkan di .header outer, tpi tak berfungsi..

mohon bantuannya : http://killerrrr.blogspot.com/

INDAHNYA BERBAGI ILMU said...

wew, nice info gan..

Anonymous said...

nice share..
mampir yuk.!! fajar196.blogspot.com

sulham syahid said...

anda membuatnya sangat mudah. saya akan memcobanya di blog saya. terima kasih

Samehadaku said...

mas aq coba petunjuk diatas tp gk bisa..kayakx templateq dikunci ama yg buat..solusinya mas azmi?

thanks mas..

Bhernadin Erryco said...

contoh jadinya kayak gimana gan?

Obat terkena hiv aids said...

boleh juga untuk di pelajari, mantap ...

id-herbal said...

sangat bermanfaat sekali infonya, sukses selalu ..........

masita said...

wah.. mantap-mantap... dicoba dulu tutorialnya

Firman Isma Kurniawan said...

thanks
kunjungi blog saya http://terungkit.com

tipes said...

makasih gan ,,
bermanfaat infonya

Download Game/Software/Anime/Movie/Film said...

Makasih sanget mas tipsnya sanat bermanfaat .
sukses selalu.

josha said...

sangat bermanfaat sekali gan informasinya...langsung saya terapkan di blog saya.....terimakasih salam balik

Lhanext.blogspot.com said...

Gan bantuin w dong pasang gambar pada header... tolong ya gan..

Unknown said...

Halo, permasalahannya gimana?

SMKN 2 TEMBILAHAN said...

saya sudah mencoba untuk mengganti background judul tetapi hasilnya tidak kayak tampilan yang di harapkan bgmn cara mengepaskan tata letaknya, contohnya yang anda punya ini, and gmn cara mempercantik tampilan menu sy tunggu jawabannya lewat e-mail

GOEZ RECORD PRODUCTION said...

mohon maaf ni gan,, blog ane udh ane otak-atik kagak bisa brubah background jdi yg di harapin,
mohon pencerahanya gan,,
ni url foto ane,,,
http://imageshack.us/photo/my-images/256/kompnenneraka.jpg/

http://goezrecord.blogspot.com/

trma ksih sblumnya..

cybercroome said...

Kalo saya mau pasang banner iklan gimana bos biar sejajar dengan title blog?? dan pas di klik langsung ke almat iklan trsebut. maksih..

edy kurniawan said...

Mantap mas, berkat tulisan mas ane dah berhasil modif dikit header ane...!!!

Dendy said...

cara biar blog kita ada menu dibahawah header kaya di blog ini gimana..?
contoh : Buka Rahasia|About|Blog tips|Blog Design|dll.

android said...

mas saya masih bingung mas

ican said...

Thx infonya gan... lagi mau ngerubah header blog nih..

media informasi said...

mau coba ganti ah gambar header blog saya tenks gan infonya.

media dakwah islam said...

mantap mas infonya untuk editing blog i slalu kunjung ni blog......tank infonya

Bagus said...

ada cara lain gak bro selain lewat html editor?
kinjungi blog saya jg ya Bagus Blog of Fisheries :D

Anonymous said...

mantap gan infonya ....

irlano said...

salam kenal gan,tolong liat blog ane gan irlanoholic.blogspot.com trus ane mau tanya klo mau ganti header sama warna ijonya diganti jd warna merah gmn gan? jd blog ane warnanya merah hitam gan. gmn gan? mohon pencerahannya gan. thanks

Muhammad Riduan said...

om, ini berarti judul & deskripsi blog-nya dari gambar yaa? bukan teks kaya template standar?

Unknown said...

Judul tutorialnya mengganti atau menambah gambar background header, jadi tidak berhubungan dengan teks atau logo pada nama blog dan deskripsinya di depannya.

Unknown said...

makasih ya pak

Siti Sarah Hanifah said...

Kak header bawaan blog saya gak sengaja terhapus, saya mau pasang lagi tapi gak tau gimana caranya? memang ada satu cara lain dengan menambahkanya di kolom tambahan gadget, tapi itu ada di pinggir postingan sama di bawah postingan.saya mau seperti semula. mohon bantuannya..

Unknown said...

1. Yang dimaksud header itu gambar logo, atau gambar header di belakang logo?
2.Apakah anda masih punya gambar aslinya?
3. Kasih alamat blognya

Remah Roti said...

mas tolong sekali di template saya tidak ada header wrapper, dan saya sudah membaca komentar diatas saya coba cari header outer ada tapi gambar tetap aja ukurannya tida berubah, saya mencoba mencari header-inner gambarnya ttetap saj tidak berubah tolong jelasakn, terimakasih.

Unknown said...

Lampirkan alamat blog atau template blog yang dipakai lewat contact form, linknya di footer kanan, nanti saya cek.

Unknown said...

Gan kalau mau upload gambarnya dimana gan? saya masih nggak ngerti, thanks

Unknown said...

Upload saja melalui post editor, sama seperti buat posting. Kemudian bukan bagian "HTML", dan ambil url gambar pada bagian "http://3bp.blogspot.com........"

Unknown said...

Sangat bermanfaat untuk blogger pemula seperti saya, semoga anda mendapat pahala...
hehehe... Sudah saya praktekkan dan IT WORKS...
Makasi gan...

Saya tunggu kunjungan baliknya...
http://catatansukiman.blogspot.com

ahlal kamal said...

makasih sobb mantapp nihh

Unknown said...

makasih gan, infonya sangat membantu sekali...

Marda Ridhovin said...

maksih banyak broe, ane dah sukses bikinnya setelah ane ikuti cara dari mas broe... skali2 kunjung ke blog ane ya di http://riemungbuloeh.blogspot.com

ilmubayoe said...

makasih banyak bantuannya...

Lukil Araya said...

mana screenshootnya

Unknown said...

trims infonya pak, akhirnya bisa juga pake baground gambar setelah coba utak atik. kebetulan saya lagi buat blog mengenai Pilkada di Padang, kalo berkenan silakan kunjungi http://pilkadapadang.blogspot.com

dunia-izan said...

terima kasih..nice blog

Ahmad Sayadi said...

Siippp gan

Unknown said...

assalaam..,
mas ahmad, kalo blog sy gmn ya edit headernya?
kulo kepengen yg bergambr jg. tp dereng ngertos cara ngeditnya.
beberapa blog telah sy bikin. tp msh blm ngerti.

blog sy rajamenyok.blogspot.com

tahar onqi said...

ini dia yang saya cari-cari
thanks gan sudah bebagi info,

Indra Al Ghazali said...

untuk mendapatkan url gambarnya dimana ya, misalnya saya taruh di album picasa

Unknown said...

@dony: sama saja kok, kasih tau kesulitannya dimana
@jimmy: upoadnya via post editor saja, kaya bikin post baru. setelah upload, buka HTML, di sebelah compose, letakknya di pojok kiri atas. setelah itu ambil/copy url gambar di bagian img src="

Unknown said...

terimakasih tutorialnya. tapi ko jadi berat yah?akhirnya saya remove lagi

Unknown said...

mas itu cara bikin tampilan judul sekaligus gambar buka rahasia blogspot bukan? trus kalau menu dibawahnya itu bagaimana? kok bagus

Unknown said...

kalo insert imagenya gak make url dalam arti mengambil dari image yang ada di Laptop sendiri gimana ? apakah mesti upload dulu baru cantumin url ?

Unknown said...

Tidak bisa. Semua file web itu wajib ada di server yang bisa diakses oleh publik. Kecuali di rumah anda punya server sendiri yang bisa diakses secara umum :lol:

Ya, mesti diupload, baru di ambil url nya. Upload aja ke post blogger trus ambil url nya via "HTML"

Mas Blogger said...

Terimakasih tutornya
kalo berkenan mampir ya!

Unknown said...

Bagaimana cara supaya Judul di Header / Nama blog kita tersebut bisa bergerak ??? Thanks

Nabirong said...

Kalau bikin ukuran header image nya agar langsung sesuai ukuran lebar header template gimana mas?

Unknown said...

iya sebaiknya gitu, cari lebar header atau lebar body di dalam css, kemudian gambar lebarnya disamakan

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap