Selasa, 19 Juli 2011

cara merubah ukuran header

Diposting oleh Dewi Thursina di 12.10
Setelah memposting cara mengganti template blog dan merubah header blog kali ini saya akan membahas sedikit cara merubah template blog terutama pada bagian header blog, setelah mengunjungi beberapa blog saya melihat ukuran header yang tidak sempurna disebabkan ukuran gambar header lebih kecil maupun lebih besar dari ukuran fix yang telah ditetapkan oleh kode css yang terdapat di template.

hal ini biasanya terjadi karena ukuran gambar header tidak sesuai dengan template css. Untuk mengatasi hal tersebut kita harus masuk ke dalam template kita caranya seperti biasa yaitu :

1. Loggin ke blogger.com ,

2. klik Design dan pilih Edit template.

3. Aktif di template anda dan pada keyboard ctrl + f (untuk fungsi pencarian cepat) dan ketik header, kira-kira tampilannya sebagai berikut :



4. Pada #header jika terdapat kode


#header{
background:url(http://bla..bla..bla..)
}



maka hapus kode tersebut, ini dikarenakan kita telah menganti header dengan cara manual tampa memasukan kode ke dalam template tersebut.

5. Nah tahap ini merupakan tahap terpenting untuk mengatur ukuran header, pada saat anda membuat header sendiri dengan photoshop atau lainnya usahakan ukuran width (lebar) dan height (tinggi) gambar harus sama dengan kode css dari template anda, bagaimana mengetahui pengaturan tinggi dan lebar template anda?
seperti sebelumnya pada keryboar ctrl + f, kemudian ketik "header", kira-kira format css header sebagai berikut :



#header{
width:900px;
height:200px;
}



**penjelasan
maksud widht adalah ukuran lebar dari header, dan height ukuran tinggi header

Jika ukurannya gambar header dengan ukuran css #header pada template anda, ganti width dengan ukuran lebar dari gambar anda dan ganti height dengan ukuran tinggi gambar anda..mudah bukan??

jika ada kendala silahkan coment y??selamat mencoba ...

75 komentar on "cara merubah ukuran header"

IlmuGuna.Blogs on 30 Juli 2011 pukul 12.08 mengatakan...

Nais Share gan ntar ane praktekin

Anonim mengatakan...

alhamdulillah, maksih ya penjelasanya dah membantu..

muslimin on 10 Oktober 2011 pukul 01.24 mengatakan...

terimakasih banyak, artikel anda telah banyak membatu, semoga sukses selalu.

ghulam.blogspot.com on 10 Oktober 2011 pukul 01.28 mengatakan...

thank ya

sri_eyiq on 19 November 2011 pukul 06.26 mengatakan...

makasii infonya.
oh ya, blognya cantik banget, like like.

WINDOWS PROBLEM on 20 November 2011 pukul 03.27 mengatakan...

thx bgt infonya... sangat berguna buat newbie seperti saya... (Desain blog yang cantik ya...)

Dewi Thursina on 20 November 2011 pukul 10.08 mengatakan...

for all--> thanks y..semoga semua tulisan saya bermanfaat n slalu semangat menulis n berbagi hal positif y ^____^

madro99 Blog on 9 Desember 2011 pukul 10.00 mengatakan...

thanks bro...izin share....

muslimin on 10 Desember 2011 pukul 00.12 mengatakan...

ass mbak salam kenal n pingin tanya: kenapa tiap komentar yang ditujukan ke posting anti: mampirnya kok ke email saya, atau alamat email kita sama kali, terimakasih

Bang Deni on 26 Desember 2011 pukul 10.42 mengatakan...

Gan, kog saya cari kodenya nggak ada, tolong penjelasannya

Faiha Fathiyyatus Salsabila on 30 Desember 2011 pukul 13.45 mengatakan...

mbak, kok aku gk ada ukuran header nya ya?

admin mengatakan...

maaf teman2 telat banget ne aq blaznya..ok aq coba bantu y

muslimin-->wss. apa maksunya setiap komentar di blog kamu masuk ke dalam email kamu y??

dhenyy-> coba cari #header atau .header..
kalo tidak ada juga cba klik kanan dari header blog kamu, lihat nama gambarnya dan cari di template kamu, kalo dapat lihat dia masuk class (lambang ".") atau id ("lambang #") apa namanya..

faiha--> kalo tidak ada ukuran mungkin dya berupa gambar aja headernya, jadi kamu tingal rubah ukuran gambar header kamu aja..


semoga membantu...kalo g bisa silahkan koment lagi ^___^

bangkitsastra on 10 Januari 2012 pukul 23.32 mengatakan...

beuhhh... bisa gitu ya.
blog'y mantap.

masargo on 11 Januari 2012 pukul 16.07 mengatakan...

thx yaa.. akhirnya bisa juga, konsepnya bikin manual dlu dalam pemanggilan headernya.. sekali lagi thx... salam kenal
www.masargo.co.cc

wisnu murti on 14 Januari 2012 pukul 06.39 mengatakan...

mantap :) aku coba ya non, jn lupa kunjung balik, follow dan like fanPage :)

Anonim mengatakan...

terima kasih info nya ..
www.cuba-tuleh.blogspot.com
visit my blog juga ya thanks...

Aina Vahrina on 21 Januari 2012 pukul 20.41 mengatakan...
Komentar ini telah dihapus oleh pengarang.
cipta sarana mandiri on 23 Januari 2012 pukul 08.08 mengatakan...

punya saya headernya kok nda ada kode seperti yang dipetunjuk mba dewi ya,gimana solusinya ya?
mohon petunjuknya.

Anonim mengatakan...

terimakasih sudah membantu

TAMPAN on 28 Januari 2012 pukul 12.44 mengatakan...

RHIENA MANIS..TERIMAKASIH ATAS INFORMASINYA..
LANGSUNG SAYNG PRAKTIKKAN.. :*

AnønyMøs-NeWbiE™ on 3 Februari 2012 pukul 19.34 mengatakan...

KK aku kan masih umurnya 11 thun
boleh gak nanya cara buat gambar header lewat photoscape pliss butuh jawaban makasih wss...

Dewi Thursina on 8 Februari 2012 pukul 11.40 mengatakan...

info cheat-->coba aja cari tutorialnya di google ya dek...

tetep smangat ngeblog y ....

^___^

Dewi Thursina on 8 Februari 2012 pukul 11.41 mengatakan...

aina--> kalo gitu coba kamu klik kanan dari gambar header kamu..dan ctrl+f nama header tadi,,
di situ letak kode cssnya ..

semoga berhasil y ...

kta on 14 Maret 2012 pukul 11.44 mengatakan...

langsung dicoba ah...tengkyu sharenya

Dewi Thursina on 14 Maret 2012 pukul 13.09 mengatakan...

sama2 kta..jika ada kendala koment balik y ^__^

tetep smangat n slalu positif y....

Fivien Febra Gumanta on 19 Maret 2012 pukul 19.02 mengatakan...

info yang sangat membantu gan,,,.

gumanta-info on 19 Maret 2012 pukul 19.04 mengatakan...

nice info sob,,, jangan lupa kunjungannya.. :D

yuhanto on 21 Maret 2012 pukul 14.39 mengatakan...

lho kok saya cari kode yang ky di atas gak ada di blog saya, maaf masif newbie...

Dewi Thursina on 23 Maret 2012 pukul 21.20 mengatakan...

info bagi yang tidak bisa menemnukan #header atau .header :

1.klik kanan gambar header kamu. contoh : di blog ini headernya yaitu gambar yang bertulis simple tutorial blog n web.

2.setelah klik kanan pilih view image.

3. copy nama gambar tersebut pada url alamat2 web.

4. lakukan tahap 1, 2 dan 3 di atas.

5. setelah pada tahap 3 pda keyboard ctrl +f paste nama image yang telah kita copy sebelumnya (url image berada pada tempat url browser tadi)

6. nahh disitu berarti nama selector css penempatan header kamu. mis : #hdr{http://url image yang tadi)

7. ikuti langkah nomor 4.

semoga berhasill ^___^

Anonim mengatakan...

kunjungi blog saya dong
http://hhrma-career.blogspot.com

headlinesabout on 13 April 2012 pukul 15.11 mengatakan...

info yang bagus dan juga artikelnya bermanfaat banget buat gue loe, ok dan makasi dari mico ok thanks a lot

Bergaya on 25 Juni 2012 pukul 22.22 mengatakan...

Mbak, saya pakai template bawaan blogspot, tapi headernya saya rasa terlalu lebar, saya kesulitan untuk membuatnya lebih ramping, sempat saya kasih gambar dengan ukuran lebih ramping tapi pengaruhnya pada H1, H2 jadi tidak berfungsi..
mohon bantuannya...

Unknown on 8 Juli 2012 pukul 15.10 mengatakan...

bagaimana dengan gambar slide dari template yang di download dari tempat lain gan..?

Bagi Ilmu on 8 Juli 2012 pukul 20.06 mengatakan...

Udah nyoba, tapi belum berhasil....
BTW nice Info sist.....

Dewi Thursina on 10 Juli 2012 pukul 13.37 mengatakan...

info bagi yang tidak bisa menemnukan #header atau .header :

1.klik kanan gambar header kamu. contoh : di blog ini headernya yaitu gambar yang bertulis simple tutorial blog n web.

2.setelah klik kanan pilih view image.

3. copy nama gambar tersebut pada url browser kamu

4. lakukan tahap 1, 2 dan 3 di atas.

5. setelah pada tahap 3 pda keyboard ctrl +f paste nama image yang telah kita copy sebelumnya (url image berada pada tempat url browser tadi)

6. nahh disitu berarti nama selector css penempatan header kamu. mis : #hdr{http://url image yang tadi)

7. ikuti langkah nomor 4.

semoga berhasill ^___^

Dewi Thursina on 10 Juli 2012 pukul 13.39 mengatakan...

aneka rasa->jika berupa slide mungkin agak rumit, pada template kamu cari alamat url yang ngelink ke alamat gambar kamu..

selamat mencari ^__^

arif on 11 Agustus 2012 pukul 00.33 mengatakan...

makasih infonya....

Yusrin on 11 Agustus 2012 pukul 01.42 mengatakan...

beberapa template yang didapat dari internet susunannya tidak seperti yang terlihat di atas. Gimana kak pencerahannya??

Unknown on 16 Agustus 2012 pukul 04.41 mengatakan...

Nyimak Sob
Mampir ya ke http://romantis-xp.blogspot.com/

Cara Membesarkan Payudara on 17 Agustus 2012 pukul 21.35 mengatakan...

makasih banyak panduan mengubak ukuran gambarnya

Obat Pembesar Penis on 21 Agustus 2012 pukul 21.38 mengatakan...

tanks atas sharenya.... semoga manfaat

Remah Roti on 12 September 2012 pukul 14.12 mengatakan...

kunjungi blog ku yahhh http://fahrie17.blogspot.com

goldhongkhong on 16 September 2012 pukul 03.42 mengatakan...

saya kurang mengerti.blog saya selalu di zoom dulu di hp.bagaimana caranya supaya tdak ngezoom

yathi on 21 September 2012 pukul 09.23 mengatakan...

klo ukuran gmbr kita lebih besar boleh ga kita memakai cara di atas,msalnya tggi headerq 1000 aq ganti jdi 200 bsa ga

arii on 29 Oktober 2012 pukul 13.24 mengatakan...

nice blog

Patriot on 2 November 2012 pukul 15.02 mengatakan...

awesome, nice posting

Dewi Thursina on 7 November 2012 pukul 11.32 mengatakan...

buat yanthi-->boleh tapi hasilnya tidak bagus karna gambar akan tampil setengah atau hasil tampilan gambar kurang bagus..

Unknown on 8 November 2012 pukul 09.18 mengatakan...

thanks infonya gan, meluncur ke tkp

zulham on 18 November 2012 pukul 21.48 mengatakan...

struktur template aku agak susah tapi aku mencoba hehehe

Anonim mengatakan...

tukerang banner yuk mba ??

yathi on 1 Desember 2012 pukul 09.52 mengatakan...

kde d atas ga ada di blogq,gmna ne aq ingn mruba tinggi gambar header

nens on 9 Desember 2012 pukul 00.37 mengatakan...

Mau di coba dech
pantesan punya saya acak acakan..

Dewi Thursina on 10 Desember 2012 pukul 11.55 mengatakan...

yathi--> kode yang paling penting bagian "#header" jika tidak ada klik gambar header kamu, maka ia akan beralih ke halaman gambar tersebut tersimpan. misal setelah diklik maka beralih ke alamat :http:/abc.com/ikan.jpg" nah cari alamat ini pada tab edit html. Dan pada bagian "height" dan "width" ganti dengan ukuran yang sesuai gambar yang ingin diganti..semoga membantu ya..

Riko Yudiansyah on 19 Desember 2012 pukul 14.34 mengatakan...

terimakasih mbak tutorialnya, sekarang blog saya jadi tambah lebar.

Unknown on 12 Januari 2013 pukul 11.42 mengatakan...

Postingan MANTAB dan BERMANFAAT
by: hypnosistcp.blogspot.com

Ubud Scooter Rental on 30 Januari 2013 pukul 14.44 mengatakan...

Makasi ya...
Nice Sharing....

Unknown on 16 Februari 2013 pukul 05.00 mengatakan...

terima kasih ya atas sharing nya nice

IniKabarKu on 19 Maret 2013 pukul 11.26 mengatakan...

Thanks infonya...

Unknown on 20 April 2013 pukul 03.23 mengatakan...

thx infonya sangat bermanfaat ..
telah berhasil di follow, di follback ya .. http://ayooprinting.blogspot.com

abu umair on 13 Mei 2013 pukul 11.09 mengatakan...

jazakumullohu khoiron infonya sangat bermanfaat. numpang nyimak.

Unknown on 16 Mei 2013 pukul 14.23 mengatakan...

Wowww.. kerren banget penjelasannya..
sangat bermanfaat..

Anonim mengatakan...

thanks sob sudah berbagi ilmu..

Anonim mengatakan...

mantab banget kakak tutorialnya..mampir ke blog ane cari uang lewat ekiosku.com yach..thanks

ringjersey on 20 Agustus 2013 pukul 04.32 mengatakan...

oke.aku coba yah.lam kenal gan

Unknown on 17 Januari 2014 pukul 22.35 mengatakan...

mbk, blognya bgus bget..

Template Booklet Company Profile on 13 Februari 2014 pukul 10.43 mengatakan...

oke.aku coba yah.lam kenal gan

Unknown on 17 Maret 2014 pukul 23.46 mengatakan...

lucu banget blogmu dek, penuh dengan warnamerah muda... salam kenal :) main main yaa

Unknown on 25 Maret 2014 pukul 01.36 mengatakan...

Kunjungan :

http://jandi-blog.blogspot.com/2014/03/jika-anda-ingin-mengatur-ukuran-halaman.html

main2 ke blog aq yah...

tika rahmadhania on 17 November 2014 pukul 08.15 mengatakan...

terimakasih infonya :)

rahmadhaniatika.blogspot.com

main2 ke blog aku juga yaaa :))

Kang Iwan on 13 Desember 2014 pukul 06.57 mengatakan...

terima kasih infonya,kalo mau menghilangkan dibawah header gmana?

Uiiiijijij on 15 Maret 2015 pukul 03.19 mengatakan...

Blognya Bagus.:) + Post

Dewa Poker Online on 30 Oktober 2016 pukul 13.46 mengatakan...

Sukses terus untuk artikelnya bagus bgt ^^

Sri Kuncoro SP on 30 Oktober 2016 pukul 19.12 mengatakan...

Wow...
Banyak kali komentarnya...
Ikut ngeramein, ah...
Thanks artikelnya...

bangluq on 2 Maret 2019 pukul 17.05 mengatakan...

makasih non, tipsnya, ini blog kami rame-rame: unyu

whatsapp plus themes on 19 Agustus 2021 pukul 17.47 mengatakan...

Thanks for sharing it as a blog. gta 5 app apk

Posting Komentar

 

rhienayups...