Regi_Adi
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
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 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…
Posted in 
44 Response to "Mengganti Background Header Blog Dengan Gambar"
thanks gan,tapi sampai sekarang,saya belum nemu gambar yang bagus buat header saya,mau bikin ndiri gak isa. .Hehehe. .
thankk....bro....mantaps nih.......
betul juga, tapi susah nyari background yg match :)
Ok sob, brmanfaat ..entar ane mw cri fic yg co2k dl ya..
wah, sya pake cara sendiri aja.. :)
kalau saya biasanya pake yang pertama saja biar lebih gampang...hee...he...
makasih sherenya...
Makasih untuk tipsnya kawand...
Tapi aku gak begitu suka dengan header bergambar...
Aku coba, trims!
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
saya headernya belum di kasih gambar,, bingung mau kasih gambar apa
saya sering salah sob kalau kasih header di blogku besarnya kadang kurang atau lebih makanya kuhilangkan saja headernya
Sob kalo punyaku dipasang gambar pada headernya kok tulisanya jadi numpuk2 ya jadi bingung aku
pgee...
kunjungan rutin....
makasih brother tutornya disimpan dulu ilmunya...
Ini yang sulit kawan.aku belum bisa memasang gambar di header.trims aku save dulu aja kawan
@mundo_idot: lihat gambar di atas Sob... mungkin "selain judul dan keterangan" belum ditandai Sob... jadi gambarnya bertumpuk dengan tulisan
Ini yang sulit kawan.aku belum bisa memasang gambar di header.trims aku save dulu aja kawan
Bisa di coba nih sob.mksh ilmunya
Lagi bingung cari-cari gambar yang cocok nih sobat
salam kenal
pake yang mudah ajah, itupun belum tentu bisa akunya heheh
Tutorial yang bagus gan.... Tx
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...
oiya linknya ntar saya pasang malam yak, ni lagi gak login, muah2an bisa segera terpajang, amin
wah makasih neh tutorial backgroundnya, dan linknya akan segera di pasang... thanks..
Brkunjung siang, sob, linkx dh pasang..trims ya ;-)
aku biasa menggunakan cara yang mudah itu sob
untuk ganti heheh
tengkyu ya
aku juga biasanya pake cara yang no 1
kok heheh
yag praktis
dan mudah
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
ikutan ngeramein komeng aaah..
sobat ,, mana bannernya tar ku pasang diblogku ,,
tips-nya simple tp bermanfaat sob, ditunggu lanjutanya :)
gambarnya mngkin harus dikompress dulu sob biar ga trlalu berat wkt loadnya, kalo headernya muncul belakangan lucu juga.. :d
oke bung,,mantreep neh tutornya,
oh ya link sobat sudah saya pasang di vanmovic
thanks broo
ealah, wong linknya dirimu dah lama kok di bloglist updetannya buwel.. he
thanks tuk tukeran linknya.. :-)
dah terpasang neh linknya.. :-)
punyaku gak aku ganti soalnya gak tau..sekarang jadi tau makasih mas
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.....
saya juga pake header..
thanks tips tmbhnyyaa
linknya belum bisa pasang dulu bos tapi ntar insyaaallah tak pasang..
woow mampir.......hajar artikel-artikel disini
step by step.....he he ....
thanks nie infonya
Punyaku ndak kompatibel prend.....
makasih infonya bro,salam kenal dari bloger baru jangan lupa kunjungan balik,saya tunggu
aq udah coba cara 1 dan cara 2, sama aj tetap ga bisa... kenapa ya??
bantu dong..
thanks
Kayanya banyak yang berminat pake cara 1 yach, simple...
Makasih yach buat informasinya,good luck buat temen2 yang mw coba... ^_^
Posting Komentar
Silakan menyampaikan kritik, saran dan komentar.