BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Menambah Gambar Untuk Header ( Judul Blog )

Tutorial Blogger Bab 1 bag 14

Sebelum melangkah lebih jauh tentang cara memasang gambar untuk header ( judul Blog ).

ada beberapa hal yang mesti  di perhatikan.

1. Ketahui dulu berapa ukuran lebar Header blog kita.

caranya dalam halaman TEMPLATE buka Edit Html.

Kemudian  geser  tab scroll ke bawah pelan-pelan, dan  cari kode dalam tag Css Seperti di bawah ini.

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

Tulisan yang saya beri garis bawah di atas merupakan informasi ukuran lebar sebuah header. ( jika di #header-wrapper tidak menemukan ukurannya, bisa saja ukuran  Outer-wrapper atau Content-wrapper menjadi patokan ukuran header.)

2. Setelah mendapatkan ukuran lebar header , maka cari gambar atau buatlah gambar untuk header kita sesuai ukuran tersebut atau kurang dari ukuran tersebut.

3. Jika anda mempunyai sofware Photoshop itu lebih bagus untuk menyimpan gambar dengan resolusi kecil namun berkualitas bagus. ( tentang menyimpan gambar dgn bantuan photoshop selengkapnya baca di sini ).

Setelah gambar untuk header telah siap. tibalah saatnya memajang atau mengirim  gambar header ke dalam blog kita.

Cara Pertama

Dalam halamana TEMPLATE tekan tulisan Elemen Halaman.

Kemudian tekan tulisan Edit di pojok bawah widget header blog kita.

Setelah itu, maka akan tampil halaman seperti gambar di bawah.

Tekan link tulisan Browse. kemudian cari gambar  yang ada di komputer yang telah kita persiapkan untuk gambar header .

setelah memilih gambarnya maka kita melangkah pada halaman berikut ini.

Keterangan :

Dibalik judul dan keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog berada bersama gambar .

Selain Judul dan Keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog tidak akan di ikut sertakan ke dalam gambar alias tersembunyi.

Setelah kita menentukan pemilihan, kemudian kita tekan tombol Simpan Perubahan.

Cara Kedua ( advance ).

Sebelumnya simpan dulu gambar untuk header ke web tempat penyedia penyimpanan gambar misalkan di photobucket.com atau googlepages.com ( baca di sini )

 

Setelah itu dalam halaman TEMPLATE buka Edit Html

Kemudian dalam kode Css cari tag #header-wrapper seperti di bawah ini.

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

setelah ketemu tambahkan kode dan alamat url gambar diantara kode tersebut .  ( jangan di copy paste kode di bawah )

penambahan alamat Url gambar,  seperti yang saya pertebal dan  akan terlihat seperti ini.

#header-wrapper { background: url(http://i120.photobucket.com/albums/o190/jaloewig/gam-14.jpg)
no-repeat left top;
height:200px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

ganti  url ( http://i120.photobucket.com/....) dengan alamat url gambar kamu. misal url ( http://alamat gambar kamu ) . sedangkan properti dan nilai   height:..px - merupakan ukuran tinggi sebuah gambar lebih baik di definisikan saja.

Setelah itu langkah selanjutnya apakah judul dan deskripsi  ( judul dan keterangan ) blog ingin di ikut sertakan atau tidak ? jika tidak ingin di ikut sertakan atau ingin di sembunyikan tambahkan saja kode ini - 

Display: none ; 

ke dalam tag  #header h1.

hasil penambahan-nya akan terlihat seperti ini.

#header h1 {
display:none;
margin:5px 5px 0;
padding:15px 20px .25em;
bla..bla
}

Begitu juga tambahkan properti dan value -

 Display:none;

untuk tag #header .description -nya.

seperti terlihat di bawah ini.

#header .description { display:none;
margin:0 5px 5px;
padding:0 20px 15px;
bla..bla
}

WARNING :

Biasanya jika judul dan descripsi blog tidak di ikut sertakan, bagian Main-Wapper dan Sidebar akan ikut naik ke atas.

salah satu solusinya bisa saja kita naikan nilai

margin-top

dari  tag  #header-wrapper -nya.

#header-wrapper { background:$bgcolor; url(alamat url)no-repeat left top;
width:660px;
margin:50px auto 10px;
border:1px solid $bordercolor;
}

menambahkan (tambahkan) nilai yang lebih tinggi pada angka yang di pertebal.

 

Technorati tags: ,
Page views this post: reader

60 komentar:

Ran!cha@TKJzone said...

join yuuukkkk

bloggerna..........

elbadr BLOG said...

Assalamualaikum....kang terima kasih
Saya mau ganti template udah di coba tapi nggak berhasil.solusinya gimana ya!!!
Wassalam

anita mui said...

ntar ku coba acchhh....permisiiiiiiiiiiiiiii

Irma Sustika LUTCF said...

Makacih buanget...karena aku baru belajar bikin blog nih, jadi masihnyoba nyoba gitu

Akut Wibowo said...
This comment has been removed by the author.
Akut Wibowo said...

wah..
tengkyu bro..
baru kali inii pake blogger..
jadi ga ngeh..
kalo menurutku sih..
flexible banget kalo pake wordpress..
hehe..

nutune.blogspot.com

zipeans said...

Info yang bagus... Maju terus Blogger Indonesia

Bayi Montox said...

Mantabbb

widnyana said...

thanx bwt tutorialnya, tp saya msh g tw cara bwt membuat header penuh kanan-kiri. tolong bantu saya...

Jaloee said...

@widnyana

maksudnya gmana mas ?? sampai kesamping layar komputer

Cepi Nadir Harsono said...

Ukuran gambar buat yang di atas berapa besar sih kak? kalau sempat mampir2 dan komen di blogku yah.. kacamatacepi.blogspot.com

rahmans.family said...

ok bro di coba dulu

Multy World said...

mantap boleh ku coBa,Broo....
thanks ya bro lam knal aja

ariefyogap said...

lam kenal mas......

Ferry Oktaviansyah said...

thx.. tutorialnya...
mantab..^^

Anonymous said...

thanks mas mantap,,,
saya coba di
http://www.wansbook.co.cc/

btw,, template na keren...

Jaloee said...

@ the onli one

makacih jg atas kunjuganya

onjor said...

thanks buat tutorialnya, saya coba dlu ya mas... :)
onjor.blogspot.com

Vande Soul said...

Bisa dicoba ney....
Makasih tutornya....
Salam blogger and happy blogging...

Indonesia News Aggregator said...

terimakasih banyak atas informasinya sobat, ini akan sangat berguna untuk kita semua Job Feed Aggregator, General Forum Discussion

salam

FARIQI said...

tukeran link yukz

Luckreez said...

wah, thanks banget gan infonya..
kunjung balik ya..

Seniman Tambun said...

kalau ingin image header kita nempel ke atas bisa gak Mas? jadi gak ada celah kosong diatas image header

Kursus Forex said...

Mkasih infonya..ikut baca2.

bawakaraeng said...

thanks tutor-nya....sangat bermanfaat..nnt aku coba..

Anonymous said...

hey jgn lupa berkunjung ke blog ku ya..
http://cool-community.blogspot.com/
- Ramalan Zodiak Mingguan
- Free download Games n Software

iz said...

trimas atas tipnya..mantap

Ahmad said...

Nice info gan, dicoba dulu.
Kalau mau menambahkan dua atau lebih gambar bisa gak gan????

kinzkinz said...

trimz info y. . .sip. . pokoe. . sukses selalu. .

Nasyiin said...

Halo, saya kesulitan mencari #header-wrapper, di template saya ga ada... oh ya, saya gagal mendaftar google adsense karena alasan sebagian besar tulisan saya berbahasa indonesia. Bagaimana cara mengatasi dan mendaftar ulang? tx

Unknown said...

thx..

hot info..
Briptu norman menggila,masyarakat ikut gila..
http://www.youtube.com/watch?v=TAgpL2zkLIw

Anonymous said...

kang, saya minta bantuan...tlong kasih koment k blog sya..pa ja yg kurang ..soalnya saya btuh pnilaian dri orang lain..trmksh...
ni nma blognya..

ilmupastiyana.blogspot.com

mklum bru bkin...

afebriando said...

thanks broo

R & U said...

pemisi gan......
trik nya lmayan jga!!

Fans Film Series said...

IKUT NIMBRUNG AH....
Gan dah di coba tapi napa ilang ea judulnya...
Istilah Judulnya ketiban ama Gambar....
Maaf mash newbie bgt nie ...
thx para bloger cmua ... : )
http://adf.ly/1sxl9 << silahkan masuk

Arief Rachmadi said...

kok gag ketemu sih gan kode yang
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor; }

apa harus di expand widgetny dulu?

stop keringat said...

Mau ta coba neh mas..mudah2am berhasil ya...
tx ut infonya

saiful said...

makasih Infonya..

kisah-kisa pengusahaa sukses said...

trimakasi informasinya....

Anonymous said...

makasih yah atas infonya

teguh creativa said...

kurang puas...ni gman?

rpekokes said...

w masih blajar ni gan tolong bantu buat ngedit blog w biar lebih enak aja di liat
https://brandalanunso.blogspot.com

Arif Hidayatullah said...

thanks for ur informations..

Hi guys.. now, i will inform you about a good website..
it's about blogger tutorials for beginners.. You can get the informations from how to make a blog up to how to optimalization your blog so you can get the high visitors traffic.
Oke.. Click this link to go to that website..
http://bloggertutorialsfornewbie.blogspot.com

thanks for your attention..
And i'm sorry for promotion here.. Hehe

saat indah bersamamu said...

Assalamu'alaikum....... edit temlate html kok g sama ya dengan panduanya. solusinya gmn?

Azhar said...

bagus.. bagus,,..

Unknown said...

maksihya atas informasinya
azari2extream.blogspot.com

FajarZone said...

asololeee

Unknown said...

terima kasih postingannya. saya dapat ilmu baru..

Unknown said...

angel

Seputar Android said...

di coba...

adrafter43.blogspot.com

Lhanext.blogspot.com said...

susah banget boss

Lhanext.blogspot.com said...

bantu dong boss

starfacus said...

thanks ya gan artikelnya semoga bermanfaat bagi newbie

farhan said...

keren join www.farhan1775.blogspot.com

powerbeauty28.blogspot.com said...

mkasih gan infonya bermanfaat sekali buat ane.............

Kang Sofi said...

Thanks Infonya bang

Anonymous said...

makasih banyak infonya yah..

Anonymous said...

informasi yang sangat bermanfaat

Anonymous said...

akan kucoba.. maksih yah..

firman said...

siip dicoba

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial