23 Juli 2013

Tutorial Header bersambung body

Assalamualaikum



Tutorial ini berhubungan sama body dan header. Jadi, persiapkan untuk mengedit code bagian header dan body. Ini tutorialnya saya try pakai TEMPLATE DESIGNER.

Sebenarnya, saya gak tau juga kenapa header saya bisa rapat sama bodynya, ya? dulu utak-atik gak bisa.
Setelah diteliti ternyata header saya  margin-nya NOL.  Yang dipakai cuma margin-top dan ditambah dengan border biar border bawah header sama border atas body menyatu.

Sulit dimengerti, ya?

Langsung ke TKP saja~
Ayo, ini blog saya for live tester-nya.

Blog ini masih ada tab menu dropdownya. Ayo dihapus dulu.


AFTER


Nah, sekarang sdh dihapus. Tinggal ada body sama header.

Steps :
  • Langsung ke edit HTML
  • Tekan F3, kemudian cari kode :
#header-wrapper {
  • Jika sudah ketemu, lihat anak code di bawahnya. Apakah ada code margin ?
  • Jika ada, ganti nilai / value- nya jadi NOL.  
margin : 0;
  • Tambahkan code di bawah ini, di bawah code di atas
margin-top : 50px;

  • Steps untuk merapatkan sudah selesai. Sekarang ke steps menambahkan border biar ada aksen elegantnya. *weeh
--------------|
  • Tekan F3, cari code di bawah ini
#content-wrapper {
  • lihat anak code-nya.
  • Example MINE : Jika anak code di bawah ini belum ada di blogmu, tambahkan saja. Tapi jika sudah ada, tinggal di ganti.
width: 950px;
margin:auto;
padding:6px;
border-left: 12px solid #eee;border-top: 3px solid #eee;border-right: 12px solid #eee;border-bottom: 0px solid #eee;
  • Tekan F3, cari code di bawah ini
#header {
  • lihat anak code di bawahnya. 
  • Example MINE : Jika anak code di bawah ini belum ada di blogmu, tambahkan saja. Tapi jika sudah ada, tinggal di ganti.

#header {
width: 950px;
margin: 0 auto;
padding: 0;
border-left: 16px solid #eee;border-top: 16px solid #eee;border-right: 16px solid #eee;border-bottom: 14px solid #eee;
}
  • Ganti nilai value margin dan paddingnya jadi NOL (0)
  • BIRU :  sesuaikan dengan lebar header anda.
  • Patstikan LEBAR 'body' dan 'header' sama.
  • Preview dulu. Nanti templatenya hancur.
  • Jika tidak ada error, 
  •  SAVE 
Ask Me if not understand ~ soalnya saya 'newbie' (y)


2 komentar:

NO HARSH WORDS
please, don't SPAM here!
I'll reply if I didn't busy -.-