Friday 26 June 2009

Membuat Kolom Disamping Header

Dalam pembuatan kolom ini anda tidak bisa memasang image header yang lama jika mengubah struktur header standar blog kita buat, jangan khawatir coz cara memasangnya ada di artikel ini.
Pertama adalah memindahkan atau upload image header lama ke googlepages.com atau geocities.com
Kedua masuk ke akun blog anda dan pilih Layout, backup template.
Modifikasi CSS:
Cari kode dibawah ini:



/* Header
---------------------------------
*/

#header-wrapper {
width:860px;
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;
}

Fokus pada kode yang berwarna hijau diatas dan replace kode tersebut dengan kode dibawah ini.

#header-wrapper {
width:860px;
margin:0 auto 0px;
background:$bgheadercolor url(LokasiImageHeaderAnda.googlepages.com) no-repeat top center;
height:140px;
}
#head-inner {
width:500px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
border-right:2px dashed $bordercolor;
}
#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}
#header-kanan{
width:300px;
text-align: justify;
float:left;
padding-top:10px;
}

Keterangan kode diatas:
  • Kode warna biru adalah lebar dan tinggi header disesuaikan dengan lebar template.
  • Tinggi pada header wrapper disesuaikan dengan tinggi image header anda.
  • Background URL di header-wrapper adalah hot linking alamat tempat peyimpanan gambar header, misalnya di googlepages.com atau geocities.com
  • #header kanan pada kode diatas adalah kode CSS untuk kolom tambahan disamping header.
  • Cara menentukan lebar kolom tambahan agar sesuai gunakan rumus ini:
    header kanan = lebar header wrapper – lebar head-inner

Setelah mengubah CSS yang harus kita lakukan adalah menambah elemen header-kanan agar penambahan CSS tadi bisa digunakan, beri tanda centang pada Expand Widget kemudian cari kode dibawah ini (tekan ctrl+F untuk mempermudah pencarian):







Setelah dapat kode diatas pilih kemudian Replace dengan kode dibawah ini:












Untuk melihat hasilnya tekan Pratinjau
jika sudah sesuai dengan keinginan anda simpan hasil modif anda tadi dengan menekan tombol Save.
Selamat anda sekarang kolom tambahan telah ada di header blog anda anda bisa memasukkan banner, Link List di kolom baru tersebut.

Tambahan:
”Image” lama yang saya maksud diatas adalah image yang anda upload langsung di add element page
Jika kolom tambahan terlihat nyasar kebawah kemungkinan ukuran yang anda berikan tidak sesuai oleh karena itu seperti jurus cara saya selama ini yaitu trial-error dengan mengganti-ganti ukuran width, margin dan padding pada kode CSS hingga menemukan posisi yang diharapkan.
(untuk saran terakhir diatas harap maklum karena semua ini juga hasil trial error )
Selamat bermodifikasi dan semoga tulisan ini bermanfaat

Komentar :

ada 1
Tivisiana said...
pada hari 

Thank bang tutorialnya penting banget neeh bwat kolom iklan di header

Post a Comment

Recent Comments