Membuat Header Penuh Dengan Body

Posted By anasku
Satu lagi nih tutorial desain atau otak-atik template blogspot yaitu mengubah ukuran header yang biasanya penuh dengan outer wrapper kini saya coba akan buat tutorial sederhana biar header blog bisa penuh dengan body.

Nah coba lihat perbedaan header blog ini, atau bisa kamu lihat Capture dibawah ini..



Dari capture diatas terlihat Header Blog memanjang memenuhi area body blog dan Header tidak satu area dengan post body dan sidebar.

Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?

Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog

Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML

Lalu cari code dibawah ini

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>



Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah


<body>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>



Kalau langkah pertama sudah selesai sekarang atur juga CSSnya

Cari code CSS dibawah ini


#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;


Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.

dan jika anda ingin tampilan header seperti blog yang ini (klik disini untuk melihat). Gunakan Css seperti dibawah ini

#header-wrapper {
width:100%;
height:120px;
margin:0 auto 0;
border-top:2px solid #000000;
background:url(http://i296.photobucket.com/albums/mm169/anasku/header-back.jpg) repeat-x;
}

Sekian dulu artikel mengenai desain template dan otak-atik blog, artikel lainya akan menyusul.. tunggu yah..

Artikel Terkait untuk "Membuat Header Penuh Dengan Body"


47 comments:

Jaloee said...

sip makin mateng dan mantep saja.. oke lanjutin kreasi na

Subagya said...

bookmark dolo

Anonymous said...

Tob narkotob nech tips nya...
Keep post,..i'll be waiting...

fansblogs said...

Hi.. Ingin menjadi administrator untuk mengelola Komunitas Joomla VS Blogger ?

Lihat syaratnya di Blog ku OK.
Bukan maksud nyepam, tapi tunjukkan diri Blogger mu.

Gun said...

tipsnya OK banget...kreatif habis...
gak nyangka kalo masih anak SMU

keep Post yah nas..

Kristina Dian Safitry said...

kalo headernya seksi,yakin badanya juga seksi. itu pasti,hi..hi..

Anasku said...

@indra fansblog
Jiah sama aja bro itu namanya spam... tapi gak papa lah berhubung gw baik hati... jiakakakakaka

Anonymous said...

tutorialnya makin heubat ya smpai bisa segitunya heheh tetap semangat

www.porongonline.co.cc said...

Hdoh Jurangan Navbarku kok ngk ilang2 Yach .... Posiiiiiiiiiiiiiiiing aku , kasih solusi Dunk

Anonymous said...

Oalah bisa dicoba nih. Sip tenan

Anasku said...

@ kampret
Baca dan pahami DISINI DISINI

Anime-IMZ said...

Bro, kok aku gak bisa ya katanya ada salah. aku cek smua udah bener. untuk info #header-wrapper-ku awalnya isinya kaya gini :

#header-wrapper {
display: none;
}

trus setelah aku ganti jadinya gini :

#header-wrapper {
width:100%;
height:120px;
margin:0 auto 0;
border-top:2px solid #000000;
background:url(http://i250.photobucket.com/albums/gg259/ikari_nerv/logo_animeblog-IMZ-Sign_New.jpg) repeat-x;
}
............bener ga?

Anonymous said...

mas kalau bikin header penuh ke body gimana?bukan penuh kelayar kaya tutorial ini?tapi dia tepat panjangnya kanan kiri dengan body blognya....kan biasanya header ada yang gak penuh kaya blog saya ini contohnya...biyar kaya punya mas ana ini gimana ya?

Anonymous said...

terima kasih banyak... banyak manfaatnya nih setelah pelajari ini.... Tolong di cek ya mas blog saya.... mungkin ada kritik dan saran baru banget nih buat blog..

http://needwallpaper.blogspot.com/

Berillium04 said...

sip

akan ku coba

Desra honein said...

wuihhh kerennnn dah dicoba boss
ntar gw terapkan in my blog deh.. thanks ya:)
klu buat lengkung header ama content wrapper nya gimana :(

NIP said...

sesuai yang saya cari ..saya coba dulu tips nya yach... makasih

HEXAGRAM said...

koq waktu aku pasang ada pesan eror ya..??

mohon bimbingan nya gan....

maklum newbi

Gadis liar said...

artikelnya OK, tapi punyaku ga ada kode #header-wrapper nya, cara nambahinnya gimana? thanks

nifan sunandar said...

Bisa meledak blog saya

Agung Pranata said...

Tlg tip and trik blogspot diperbanyak

Kenali dan Kunjungi Objek Wisata di Pandeglang said...

thanks kk infonya..

Tukang Corat - Coret said...

Makasih Mas Anas :)

Maya said...

wah..ini yg saya cari2.. mksh mas

boerhann said...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "div" must be terminated by the matching end-tag "
"...dah nyoba bos..to suruh edit lg...ampun deh,he he....thx infonya

belog said...

dak bisa dibuat secara ofline ya mas??kayak xampp gitu???

Bita.com said...

blognya dah rame bos...saya mau ganti headernya biar menarik gmn yaaaaa....saya jualan lcd laptop compatible buat semua merk laptop nih.....klo ada yang butuh boleh sms 085711665051....terimakasih

dimpun said...

koq waktu aku pasang ada pesan eror ya..??

mohon bimbingan nya gan....

maklum newbi

Sali Monel said...

@Dimpun
Berarti masih ada yang salah dalam penempatanya atau code yang di pindah. coba di teliti lagi kawan. :)

rey said...

untuk footernya biar penuh caranya gimana mas?

Alimz~Serizawa said...

asu aku gk ngerti....... nyari bodynya d mna tuh??

hybrid 100 said...

ok keren"

blogger said...

bagus sob info a,
kunjungi balik
http://klatenclassicscountry.blogspot.com/

Adexme said...

Makasih ya mas atas tutorial yang di berikan.
semoga sukses..
umpan balik ya mas :
http://blogadexme.blogspot.com

DulduLization said...

trims tutorialnya kk..
dicoba dulu deh..

Unknown said...

ajib...

Bang Deni said...

Gan, gua belum ngerti nih...tolong balas ke email gua ya
deni_funk31@yahoo.com

obat herbal stroke said...

info yang menarik nih gan,,,
izin kopi yach...

smarttv.16mb.com said...

saya praktekan dulu, dr kmrn cr2 bru neme disini.....

obat tradisional alzheimer said...

terima kasih sobb sidah berbagi triknya salam kenal dan sukses selalu!!

Pembuat Patung said...

Sebelum edit blog jangan lupa disimpan dulu temple aslinya ,triknya keren sob.

Anggi said...

ini dia yang gue cari sob.... makasih ya....

suka herbal said...

thanks om , saya praktekin dulu .

obat kutil kelamin said...

informasi yang amat menarik

obat kutil kelamin ampuh said...

tapi berat jadinya..

Unknown said...

Thanks tutorial nya^^
Kunjungi juga ya sanitatisofficial.blogspot.com

Unknown said...

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas