mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

Membuat kolom baru disamping header

Kalo diperhatikan di blog ini headernya terdapat 2 bagian, kiri adalah judul dan deskripsi singkat dan bagian kanan adalah kumpulan link. Tentu template standar tidak bisa seperti ini, yang harus dilakukan adalah mengubah sedikit CSS kode dan menambah kode HTML di bagian tag <body> </body> dari template Anda.

Kekurangannya adalah dengan cara ini Anda tidak bisa memasang image header yang lama jika mengubah struktur header standar blog kita but 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):


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

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


<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='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

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 :x 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 :D )

Selamat bermodifikasi dan semoga tulisan ini bermanfaat ;) .
UPDATE:
buat rekan blogger yang menggunakan Template blogger versi terbaru silahkan baca cara membuat kolom baru pada header untuk template blogspot versi terbaru, semoga bermanfaat

19 komentar:

Agung setiawan mengatakan...

Mas thanks Infonya...bagaimana ya bikin gambar header bergerak.....


salam


agungsetiawanpladut

Oentoe_09 mengatakan...

sama-sama mas Agung, senang rasanya bisa saling berbagi :)

SURATMAN mengatakan...

Nnt akan aq coba tips nya,mksh tlah berkunjg blk ke tmpt aq.Bos klo berkenan blh ikut google friend connect di blog ku..itung2 ngramein gt xi..xi..xi..

Mujahid Cinta mengatakan...

hehe, akhkirnya nyangkut dimari ane..
postingan yang bagus, salam kenal hib, agel ibrahim !

Soft - Solusi mengatakan...

salam kenal! postingnya bagus nih..

Mas Joko mengatakan...

ok sob infonya,...makasih ya

Oentoe_09 mengatakan...

@ Mujahid & Soft Solusi : Salam kenal juga Sob...
@ Mas Joko: sama-sama sob

rey mengatakan...

pada template blogger baru tidak ada kode <div id='header-wrapper'> .solusinya gimana mas mohon pencerahan. trims.

Oentoe_09 mengatakan...

@ Rey: pada template blogger baru <div id='header-wrapper'> memang tidak ada, jika mengambil contoh dari template Etheral (template blogger baru), <div id='header-wrapper'> berubah menjadi <div class='fauxborder-left header-fauxborder-left'>. Sementara <div id='head-inner'> berubah menjadi <div class='region-inner header-inner'>.
Perubahan struktur CSS dan HTML pada template blogger juga masih terasa asing buat saya n jika hackingnya sukses jangan lupa di share ya Mas?

bloger baru mengatakan...

gimana ya kalau pada simple template oleh jemes peterson kirimkan pada email ku ya mas arig.rig@mail.com

Oentoe_09 mengatakan...

@ Blogger Baru: untuk yang template new Version bisa baca caranya dicara membuat kolom baru pada header untuk template blogspot versi terbaru.
Semoga bermanfaat.

putry mengatakan...

thanks mas untuk infonya ..
bagi yang pengen tau technology terbaru masa depan, silahkan mapir di
Latest Technology

AbduGreen mengatakan...

Berhasil berhasil berhasil ... hore......

Makasih banyak sob infonya...

jangan lupa kunjungi balik ya sob...

Share mengatakan...

Mantab thanks infonya
Kalau ngehilangin read more bisa egk ya
Saya ada masalah di situ
mungkin kawan - kawan blogger bisa bantu

Wah Agus mengatakan...

sangat membantu sobat..
mampir ya ke blog ana ya
http://bali-network.blogspot.com/

abang janut mengatakan...

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

punya ane beda gan....

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Abang Janut Blog (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

dimana tuh naro-nya?

Oentoe_09 mengatakan...

@Putry: sama-sama put

@Abdu Green: Selamat Sob...

@Share: silahkan search di blog ini, ada kok...

@ Wah Agus: Alhamdulillah sudah berguna, btw kunjungan baliknya terlaksana dgn sukses :D

@ Abang Janut: sama kok Bang, silahkan baca baik2 artkel diatas

Kraeng Francisco mengatakan...

patut dicoba. Trima kasih ya

andisetiadi.blogspot.com mengatakan...

susah gan

Posting Komentar

Label

Blog support

Entri Populer