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:
Fokus pada kode yang berwarna hijau diatas dan replace kode tersebut dengan kode dibawah ini.
Keterangan kode diatas:
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 sepertijurus 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 ;) .
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
(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
18 komentar:
Mas thanks Infonya...bagaimana ya bikin gambar header bergerak.....
salam
agungsetiawanpladut
sama-sama mas Agung, senang rasanya bisa saling berbagi :)
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..
hehe, akhkirnya nyangkut dimari ane..
postingan yang bagus, salam kenal hib, agel ibrahim !
salam kenal! postingnya bagus nih..
ok sob infonya,...makasih ya
@ Mujahid & Soft Solusi : Salam kenal juga Sob...
@ Mas Joko: sama-sama sob
pada template blogger baru tidak ada kode <div id='header-wrapper'> .solusinya gimana mas mohon pencerahan. trims.
@ 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?
gimana ya kalau pada simple template oleh jemes peterson kirimkan pada email ku ya mas arig.rig@mail.com
@ Blogger Baru: untuk yang template new Version bisa baca caranya dicara membuat kolom baru pada header untuk template blogspot versi terbaru.
Semoga bermanfaat.
thanks mas untuk infonya ..
bagi yang pengen tau technology terbaru masa depan, silahkan mapir di
Latest Technology
Mantab thanks infonya
Kalau ngehilangin read more bisa egk ya
Saya ada masalah di situ
mungkin kawan - kawan blogger bisa bantu
sangat membantu sobat..
mampir ya ke blog ana ya
http://bali-network.blogspot.com/
<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?
@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
patut dicoba. Trima kasih ya
susah gan
Posting Komentar