Seperti kata saya kemarin bahwa kali ini kita akan belajar membuat dua (2) buah header, yaitu left header dan right header. Kalau diantara Anda masih ada yang tertinggal atau belum membaca postingan saya yang sebelumnya, silahkan Anda baca dan pahami dulu postingan sebelumnya :
1. BASIC MEMBUAT TEMPLATES BLOG.
2. BASIC MEMBUAT TEMPLATES BLOG BAGIAN II.
Kalau sudah dibaca dan mengerti, mari kita lanjutkan ke pembahasan postingan ini. Yaitu membuat left header dan right header dengan memodifikasi templates "MINIMA" dari blogspot.
Sebelum kita mengexplore script, ada baiknya kita harus paham dengan teori script.. Kita sekarang kan mau merubah sebuah header menjadi dua buah header!?. Nah jadi, pengertianya... kita harus membuat script header baru, tetapi script yang akan kita buat tetap berada di dalam pembungkus header itu sendiri. Pembungkus biasa dikenal dengan bahasa script sebagai "WRAPPER". Jadi kita akan buat atau memecahkan sebuah header menjadi dua buah header di dalam header wrapper.. Sampai sini paham?! kalau kurang paham atau tidak paham, dilanjut aja membaca-nya nanti juga lama kelamaan ngerti..
Baik sekarang cari script header wrapper :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:925px
margin:0 auto 10px
border:1px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
-----------------------------------------------
*/
#header-wrapper {
width:925px
margin:0 auto 10px
border:1px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
Lebar header atau satu buah header pada script di atas ialah 925px.. Jadi kalau kita mau membuat dua buah header, maka nilai pixel atau ukuran di atas dibagi menjadi 2 (dua), yaitu 925:2=462,5... Silahkan yang setengah-nya mau di kemana-kan.. Misal di ke kirikan, berarti untuk left header 463px dan untuk right header 462px. Atau sesuai keinginan Anda, misal yang right header mau lebih kecil... Anda bisa mengecilkan ukuran pixelnya. Tetapi dengan syarat kalau jarak margin dan lebar border harus kita tiadakan menjadi 0px. Karena lebar keseluruhan 925px, kalau lebar left header+lebar right header+jarak margin misal 10px (x2)+lebar border misal 1px(x2) jadi jumlahnya 947px. 947px itu over bila outer wrapper hanya 925px, jadi pengertiannya, 947px itu di luar pembungkus. Maka-nya lebar border yang default dari MINIMA 1px kita ubah menjadi 0px dan jarak margin 10px kita ubah menjadi 0px juga. Karena lebar left header+lebar right header, lebarnya sudah pas atau sama dengan lebar outer wrapper yaitu 925px.
Sekarang mari ubah kode CSS di atas menjadi seperti ini :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:925px
margin:0 auto 0px
border:0px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
-----------------------------------------------
*/
#header-wrapper {
width:925px
margin:0 auto 0px
border:0px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
Tulisan yang berwarna biru di atas lah yang harus diganti.
Selanjut-nya merubah dan menambahkan kode CSS header wrapper. Maksud merubah ialah, menentukan posisi left dan right-nya dan menambahkan ialah menambahkan sebuah header baru (buat bikin right header). Tetapi sebelumnya, kita harus tau pengertian-nya dulu... Untuk mengatur apakah header mau ditempatkan di kiri atau di kanan yaitu dengan menambahkan script "FLOAT:right (kalau mau di kanan) left (kalau mau di kiri)". Dan tambahkan id header wrapper.. "id" yang menunjukkan kesinambungan dengan XML script yang nanti akan kita buat. Jadi kalau kurang mengerti dengan pengertian tadi, langsung saja lihat kode yang sudah saya ubah ini :
/* Header
-----------------------------------------------
*/
#left-header-wrapper {
width:463px
float:left
margin:0 auto 0px
border:0px solid $bordercolor
}
#right-header-wrapper {
width:462px
float:right
margin:0 auto 0px
border:0px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
-----------------------------------------------
*/
#left-header-wrapper {
width:463px
float:left
margin:0 auto 0px
border:0px solid $bordercolor
}
#right-header-wrapper {
width:462px
float:right
margin:0 auto 0px
border:0px solid $bordercolor
}
#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}
#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}
#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}
#header a {
color:$pagetitlecolor
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}
#header img {
margin-$startSide: auto
margin-$endSide: auto
}
Perhatikan script di atas, saya harap tanpa saya banyak kata, Anda sudah mengerti.. Saya merubah header-wrapper menjadi "LEFT-HEADER-WRAPPER" dan menambahkan perintah float:left karena untuk berada di posisi kiri. Dan saya mengcopy script left-header-wrapper lalu saya taruh di bagian dari header (dalam contoh di atas saya taruh di bawah left-header-wrapper). Copy-an tadi saya ubah sedikit, menjadi "RIGHT-HEADER-WRAPPER" dan width-nya seperti yang sudah kita kalkulasikan di awal, yaitu untuk lebar right-nya 462px.. serta saya tambahkan float:right agar posisi-nya berada di kanan.
Kalau script-nya sudah Anda ubah seperti script di atas, mari kita lanjutkan ke penambahan script XML-nya. Cari-lah script ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
Nah tulisan yang saya warnai merah itu mungkin berbeda dengan script "MINIMA" Anda..
Ket :
MAXWIDGETS : berapa banyak gadget yang bisa ditambahkan..
SHOWADDELEMENT : tampilkan add gadget..
LOCKED : kunci penambahan gadget..
Untuk yang "BLOG ARCHIVE" itu hanya penempatan isi gadget atau widget.. pada kondisi script di atas, blog archive-nya saya taruh di header. Jadi untuk "BLOG ARCHIVE" biar gampangnya Anda ubah di menu page element saja. Sedangkan maxwidget, showaddelement dan locked bisa Anda ubah langsung.
Sekarang copy script tadi dan paste dibawah-nya, lalu di hasil copy-an tadi hilangkan widget blog archive-nya. Karena tidak mungkin blog archive-nya ada dua (memang bisa, tapi untuk kali ini silahkan dihapus), maka hasilnya akan seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
</b:section>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
</b:section>
Nah, sekarang tinggal menyambungkan "id" masing-masing script XML di atas agar nyambung dengan "id" script CSS.. Maka script-nya akan seperti ini :
<div id='left-header-wrapper'>
<b:section class='header' id='left-header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<div id='right-header-wrapper'>
<b:section class='header' id='right-header' maxwidgets='4' showaddelement='yes'>
</b:section>
<b:section class='header' id='left-header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<div id='right-header-wrapper'>
<b:section class='header' id='right-header' maxwidgets='4' showaddelement='yes'>
</b:section>
Tulisan yang berwarna biru yaitu script yang harus ditambahkan.. Sekarang coba save templates-nya dan masuk ke menu "LAYOUT" --> "PAGE ELEMENT". Dan taruh widget atau script apa saja di header... Maka contoh gambar-nya akan seperti ini :
Perhatikan!! Sudah ada dua header (left header dan right header)... Jangan khawatir meskipun gambar pada layout menunjukkan kalau right header ada di bawah left header... Tapi sebenar-nya itu sejajar kok.. Itu hanya karena halaman-nya saja yang tidak muat atau ada bagian dari footer wrapper yang width-nya harus diperlebar lagi... Tapi coba view aja blog-nya... Udah keren kok!!, nih gambar-nya :
Pada gambar di atas saya taruh blog archive di left header dan profile/about me di right header.. Anda bisa mengganti-nya dengan yang lain semisal iklan atau gambar.
Cukup sekian dulu tutorial-nya, nanti dilanjutkan ke bagian 4 yang membahas cara memasang background gambar di header.
Semoga jelas dan bermanfaat...
0 comments:
Post a Comment