Selasa, 19 Juli 2011

cara merubah ukuran header

Diposkan 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 ...

76 komentar on "cara merubah ukuran header"

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

Nais Share gan ntar ane praktekin

Riko El Rasyied on 23 Agustus 2011 19.43 mengatakan...

alhamdulillah, maksih ya penjelasanya dah membantu..

muslimin on 10 Oktober 2011 01.24 mengatakan...

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

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

thank ya

sri_ecil on 19 November 2011 06.26 mengatakan...

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

WINDOWS PROBLEM on 20 November 2011 03.27 mengatakan...

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

Dewi Thursina on 20 November 2011 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 10.00 mengatakan...

thanks bro...izin share....

muslimin on 10 Desember 2011 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

Dhenny Gydeadn's on 26 Desember 2011 10.42 mengatakan...

Gan, kog saya cari kodenya nggak ada, tolong penjelasannya

Faiha Fathiyyatus Salsabila on 30 Desember 2011 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 23.32 mengatakan...

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

masargo on 11 Januari 2012 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 06.39 mengatakan...

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

Cuba-Tuleh on 16 Januari 2012 11.24 mengatakan...

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

Aina on 21 Januari 2012 20.41 mengatakan...

Ass.. mau tanya Kak, aku udah ctrl+f #header, tapi no matches kak. itu gimana ya? mohon bantuannya. terima kasih banyak. Salam blogger!

cipta sarana mandiri on 23 Januari 2012 08.08 mengatakan...

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

duistr.com on 27 Januari 2012 15.37 mengatakan...

terimakasih sudah membantu

TAMPAN on 28 Januari 2012 12.44 mengatakan...

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

INFO-INFO CHEAT on 3 Februari 2012 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 11.40 mengatakan...

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

tetep smangat ngeblog y ....

^___^

Dewi Thursina on 8 Februari 2012 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 11.44 mengatakan...

langsung dicoba ah...tengkyu sharenya

Dewi Thursina on 14 Maret 2012 13.09 mengatakan...

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

tetep smangat n slalu positif y....

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

info yang sangat membantu gan,,,.

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

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

yuhanto on 21 Maret 2012 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 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 ^___^

KKH-Komunitas Karyawan Hotel on 1 April 2012 19.03 mengatakan...

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

headlinesabout on 13 April 2012 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 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...

Aneka Rasa Cinta on 8 Juli 2012 15.10 mengatakan...

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

Bagi Ilmu on 8 Juli 2012 20.06 mengatakan...

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

Dewi Thursina on 10 Juli 2012 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 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 00.33 mengatakan...

makasih infonya....

Yusrin on 11 Agustus 2012 01.42 mengatakan...

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

RIYAN DVLOVERS on 16 Agustus 2012 04.41 mengatakan...

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

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

makasih banyak panduan mengubak ukuran gambarnya

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

tanks atas sharenya.... semoga manfaat

Tutorial blog | Tips Trik | Download | Komputer | Handphone | Request Aplikasi on 27 Agustus 2012 04.25 mengatakan...

Kebetulan lagi nyari nyari.dan akhirnya ketemu juga di sini...Buat yg punya blog,makasih infonya.
Kalau brkenan slhkan kunjungi blog sederhana saya:
Moding Hp java symbian
www.kitabgundul.blogspot.com
www.tutorialkomplit.blogspot.com

fah rie on 12 September 2012 14.12 mengatakan...

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

goldhongkhong on 16 September 2012 03.42 mengatakan...

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

yathi on 21 September 2012 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 13.24 mengatakan...

nice blog

Patriot on 2 November 2012 15.02 mengatakan...

awesome, nice posting

Dewi Thursina on 7 November 2012 11.32 mengatakan...

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

RAJAGUKGUK ONLINE on 8 November 2012 09.18 mengatakan...

thanks infonya gan, meluncur ke tkp

zulham on 18 November 2012 21.48 mengatakan...

struktur template aku agak susah tapi aku mencoba hehehe

Acep Pajar on 24 November 2012 16.42 mengatakan...

tukerang banner yuk mba ??

yathi on 1 Desember 2012 09.52 mengatakan...

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

nens on 9 Desember 2012 00.37 mengatakan...

Mau di coba dech
pantesan punya saya acak acakan..

Dewi Thursina on 10 Desember 2012 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 14.34 mengatakan...

terimakasih mbak tutorialnya, sekarang blog saya jadi tambah lebar.

Tanto Aljauharie on 10 Januari 2013 05.34 mengatakan...

Nice Info, Thanks
Jawharie.blogspot.com

Restu Kurniawan on 12 Januari 2013 11.42 mengatakan...

Postingan MANTAB dan BERMANFAAT
by: hypnosistcp.blogspot.com

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

Makasi ya...
Nice Sharing....

blaze dana on 16 Februari 2013 05.00 mengatakan...

terima kasih ya atas sharing nya nice

IniKabarKu on 19 Maret 2013 11.26 mengatakan...

Thanks infonya...

ayooprinting@blogspot.com on 20 April 2013 03.23 mengatakan...

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

abu umair on 13 Mei 2013 11.09 mengatakan...

jazakumullohu khoiron infonya sangat bermanfaat. numpang nyimak.

Jezzy Traveller on 16 Mei 2013 14.23 mengatakan...

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

masterz-seo on 27 Mei 2013 23.48 mengatakan...

thanks sob sudah berbagi ilmu..

bisnisonlinew on 27 Mei 2013 23.58 mengatakan...

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

ringjersey on 20 Agustus 2013 04.32 mengatakan...

oke.aku coba yah.lam kenal gan

Giri Miharja on 28 November 2013 11.51 mengatakan...

terimakasih gan blog anda menarik jangan lupa mampir ke http://girimiharja.student.ipb.ac.id

tonto comanche on 17 Januari 2014 22.35 mengatakan...

mbk, blognya bgus bget..

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

oke.aku coba yah.lam kenal gan

utamiria dwi k on 17 Maret 2014 23.46 mengatakan...

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

did erni on 25 Maret 2014 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 08.15 mengatakan...

terimakasih infonya :)

rahmadhaniatika.blogspot.com

main2 ke blog aku juga yaaa :))

Bogor Outbound Adventure Camp on 13 Desember 2014 06.57 mengatakan...

terima kasih infonya,kalo mau menghilangkan dibawah header gmana?

Adeva on 15 Maret 2015 03.19 mengatakan...

Blognya Bagus.:) + Post

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

Sukses terus untuk artikelnya bagus bgt ^^

Matsan Saga on 30 Oktober 2016 19.12 mengatakan...

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

Poskan Komentar

 

rhienayups...