Mengganti Background Header Blog Dengan Gambar

Ketemu lagi di acara Kumpulan Tutorial Ngeblog...hehehehehehe...tepuk tangan dong...

Kali ini kita akan membahas tutorial mengganti background header blog dengan gambar. Kenapa harus gambar??? Kan bisa pake warna??? kalau mengganti warna background header blog sudah kita bahas pada kesempatan yang lalu. Silakan Sobat baca cara mengganti warna background header blog.

Jika mengganti background header blog dengan gambar, blog kita akan terlihat lebih menarik. Pada dasarnya, gambar mewakili kata-kata yang ngga mungkin kita tuliskan. Jadi, header blog mewakili bagaimana karakteristik blog kita. Kalau blog Kumpulan Tutorial Ngeblog menggunakan gambar header yang kecil. Kenapa kok kecil???? Kan itu trik supaya halaman blog ini tidak berat saat loading...hehehehehe...

O iya, sebelum mengganti background header blog Sobat dengan gambar, perhitungkan dahulu ukuran gambar yang akan Sobat gunakan sebagai background header blog. Misalnya ukuran header blog Sobat lebarnya 800px. Jadi kita harus mempersiapkan gambar selebar 800px dengan tinggi terserah Sobat. Gambar bisa Sobat buat dengan Photoshop, CorelDRAW atau software pengolah gambar lainnya.

Gambar sudah siap, sekarang tinggal kita pasang. Silakan simak tutorial di bawah ini

=== Cara Mudah ===

Login ke akun Blogger milik Sobat > Tata Letak. Klik link edit pada bagian header blog.

Atur seperti pada gambar di bawah ini

Cari gambar di komputer Sobat dengan menekan tombol Telusuri. Jika sudah, proses upload akan berjalan. Setelah itu beri tanda pada “Selain judul dan keterangan” lalu klik tombol Simpan.


=== Cara agak sulit ===

Cara berikut ini cukup rumit karena kita harus menyimpan gambar kita ke salah satu image hosting yang ada di internet. Jika Sobat tertarik menggunakan cara manual, silakan simak langkah-langkah berikut ini

Langkah 1
Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Langkah 2
Cari kode berikut ini atau yang agak mirip, gunakan Ctrl+F untuk mempermudah pencarian kode pada template Blogger

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Jika sudah ketemu, tambahkan kode background:url(link gambar); sehingga kode nya jadi seperti ini

#header-wrapper {
background:url(link gambar);
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti link gambar dengan lokasi penyimpanan gambar header blog Anda. Jika sudah selesai, klik tombol Simpan.

Semoga bermanfaat…

Artikel Terkait



Berlangganan


Tulis alamat email Anda untuk berlangganan artikel terbaru dari blog ini:

Delivered by FeedBurner

44 Response to "Mengganti Background Header Blog Dengan Gambar"

Sou Stalker mengatakan...

thanks gan,tapi sampai sekarang,saya belum nemu gambar yang bagus buat header saya,mau bikin ndiri gak isa. .Hehehe. .

Fajar mengatakan...

thankk....bro....mantaps nih.......

Darin mengatakan...

betul juga, tapi susah nyari background yg match :)

Ratasoe mengatakan...

Ok sob, brmanfaat ..entar ane mw cri fic yg co2k dl ya..

secangkir teh dan sekerat roti mengatakan...

wah, sya pake cara sendiri aja.. :)

rizal mengatakan...

kalau saya biasanya pake yang pertama saja biar lebih gampang...hee...he...

makasih sherenya...

Rock mengatakan...

Makasih untuk tipsnya kawand...
Tapi aku gak begitu suka dengan header bergambar...

nuances pen mengatakan...

Aku coba, trims!

Mas Ben mengatakan...

Kalau saya selalu terbentur sama masalah dimensi. Setiap dapet gambar bagus, harus dicrop dulu, udah gitu hasilnya pasti kalau ndak jadi kurus, mesti jadi gendut karena efek resize yang menyesuaikan panjang dan lebarnya :)

Salam bentoelisan
Mas Ben

Hendro-Prayitno mengatakan...

saya headernya belum di kasih gambar,, bingung mau kasih gambar apa

munir ardi mengatakan...

saya sering salah sob kalau kasih header di blogku besarnya kadang kurang atau lebih makanya kuhilangkan saja headernya

mundo_idiot mengatakan...

Sob kalo punyaku dipasang gambar pada headernya kok tulisanya jadi numpuk2 ya jadi bingung aku

daniel wahyu perbawa mengatakan...

pgee...
kunjungan rutin....
makasih brother tutornya disimpan dulu ilmunya...

tomo mengatakan...

Ini yang sulit kawan.aku belum bisa memasang gambar di header.trims aku save dulu aja kawan

Regi_Adi mengatakan...

@mundo_idot: lihat gambar di atas Sob... mungkin "selain judul dan keterangan" belum ditandai Sob... jadi gambarnya bertumpuk dengan tulisan

tomo mengatakan...

Ini yang sulit kawan.aku belum bisa memasang gambar di header.trims aku save dulu aja kawan

Uswah mengatakan...

Bisa di coba nih sob.mksh ilmunya

Ari mengatakan...

Lagi bingung cari-cari gambar yang cocok nih sobat

salam kenal

richoyul mengatakan...

pake yang mudah ajah, itupun belum tentu bisa akunya heheh

akhatam mengatakan...

Tutorial yang bagus gan.... Tx

buwel mengatakan...

wah makasih neh, udah baca tutorial kek gini puluhan kali, namun sayang, buwel emang nggak bisa photoshop dan aplikasi sejenisnya sih. he
btw thanks ea...

buwel mengatakan...

oiya linknya ntar saya pasang malam yak, ni lagi gak login, muah2an bisa segera terpajang, amin

achen mengatakan...

wah makasih neh tutorial backgroundnya, dan linknya akan segera di pasang... thanks..

Ratasoe mengatakan...

Brkunjung siang, sob, linkx dh pasang..trims ya ;-)

darahbiroe mengatakan...

aku biasa menggunakan cara yang mudah itu sob
untuk ganti heheh
tengkyu ya

antok mengatakan...

aku juga biasanya pake cara yang no 1
kok heheh
yag praktis
dan mudah

Syam Oby mengatakan...

kak,,,,
aku dah pake tipsnya
tp ko kelihatan aneh gimana gitu
apa gambarnya aja yah yg aneh :/

aku pingin ganti header blogk
biar gak gambar balon udara mulu
hihihih

makasih ilmunya

salam
dri bloger abnormla

orang kampung mengatakan...

ikutan ngeramein komeng aaah..

mundo_idiot mengatakan...

sobat ,, mana bannernya tar ku pasang diblogku ,,

kahfilyzer mengatakan...

tips-nya simple tp bermanfaat sob, ditunggu lanjutanya :)

zoft mengatakan...

gambarnya mngkin harus dikompress dulu sob biar ga trlalu berat wkt loadnya, kalo headernya muncul belakangan lucu juga.. :d

van mengatakan...

oke bung,,mantreep neh tutornya,
oh ya link sobat sudah saya pasang di vanmovic
thanks broo

buwel mengatakan...

ealah, wong linknya dirimu dah lama kok di bloglist updetannya buwel.. he
thanks tuk tukeran linknya.. :-)

achen mengatakan...

dah terpasang neh linknya.. :-)

netmild mengatakan...

punyaku gak aku ganti soalnya gak tau..sekarang jadi tau makasih mas

Ferdinand mengatakan...

Wah aku dari awal ga pernah niat ganti2 gambar atau backgroun Sob....hhe...tp maksih info'y...

OIya Sob...Linknya udah aku pasang balik dengan nama kumpulan tutorial Ngeblog....silahkan dicek....makasih udah add linkku.....

kang tejo mengatakan...

saya juga pake header..

thanks tips tmbhnyyaa

linknya belum bisa pasang dulu bos tapi ntar insyaaallah tak pasang..

ArenaBetting.com dukung fair play FIFA world cup AFSEL 2010 mengatakan...

woow mampir.......hajar artikel-artikel disini

ArenaBetting.com dukung fair play FIFA world cup AFSEL 2010 mengatakan...

step by step.....he he ....

Gudang Ilmu mengatakan...

thanks nie infonya

zaenal mengatakan...

Punyaku ndak kompatibel prend.....

eky mengatakan...

makasih infonya bro,salam kenal dari bloger baru jangan lupa kunjungan balik,saya tunggu

riaberbagi mengatakan...

aq udah coba cara 1 dan cara 2, sama aj tetap ga bisa... kenapa ya??
bantu dong..
thanks

munich@jak-stik.ac.id mengatakan...

Kayanya banyak yang berminat pake cara 1 yach, simple...
Makasih yach buat informasinya,good luck buat temen2 yang mw coba... ^_^

Poskan Komentar

Silakan menyampaikan kritik, saran dan komentar.