Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Sunday, January 4, 2009

Menambah Kolom-Kolom Kecil Diatas Header

Sudah lihat judul di-atas yach?hmm...,yodah deh,mau gimana lagi.. dah terlanjur di-lihat sama sampean hehe.. Mau ngga mau w harus kasih tau deh secuil tips-trick dari hasil otak-atik pas w gx bisa tidur kemarin.. ^^.Untung-nya,dari "ke-isengan" tersebut,w bisa ketemu trick yang lagi situ baca sekarang ini.Dan akhirnya w bisa menyimpulkan klo semua bagian body blog ternyata bisa kita tambahin elemen baru lho.. (Penting ngga sih omongan gue yang ini..?hehe..)

Dah deh,dari pada lama-lama.. mending kita langsung ke inti nya aja yaitu bagaimana cara menambah sebuah elemen kecil persis diatas header.






1. Yang pasti login dulu ke blogspot,kemudian masuk ke Tata Letak > edit HTML.

2. Jangan sampai lupa untuk simpan template anda terlebih dahulu..( Klik Download Template Lengkap ) untuk berjaga-jaga seandainya terjadi kesalahan pengetikan kode HTML.

3. Sudah..?oke,w lanjutkan.. sekarang cari kode ini ]]></b:skin> dan masukkan kode dibawah ini di atas kode tersebut:



Nb: Anda bisa merubah jarak padding sesuai dengan keinginan anda.

4. Simpan dulu hasil kerja anda.

5. Langkah selanjutnya,cari kode <div id='header-wrapper'>,setelah itu masukkan kode di bawah ini tepat di atasnya:



6. Simpan hasil kerja anda.Lalu ke layout dan lihat hasilnya..
Contohnya bisa anda lihat di halaman paling atas blog ini.( untuk blog ini,w masukin widget google translate di elemen baru tsb.)

-Untuk merubah lebar elemen,anda tinggal mengganti tulisan yang berwarna merah di atas.Dalam contoh ini,saya memakai width nya selebar 160px.dan float (letak elemen) berada di sisi paling kanan dari halaman.

-Untuk merubah float-nya,anda tinggal menggantinya menjadi center,left,atau right.

7. Andapun dapat memodifikasi elemen tersebut menjadi beberapa bagian lho.. caranya tinggal meng-copy kode yang sama dan di taruh berurutan ke bawah sebelum kode <div id='header-wrapper'>.Namun kode "Box1" nya di ganti menjadi "Box2" , "Box3" dan seterusnya..

8. Bingung?yodah,w kasih contoh dari kreasi w sendiri deh.ini kodenya modifikasi-nya:

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

-Untuk memasangnya kode modifikasi ini,anda tinggal mengganti kode di langkah ke-5 dengan yang diatas.simple bukan..?
Sebagai keterangan,w memasukkan kode width-nya dengan persen hanya untuk mempermudah w mengkalkulasi total lebar halaman.. anda dapat menggantinya koq dengan satuan pixel.tinggal ganti "%" nya dengan "px" aja di belakangnya.

9. Tinggal pilih sendiri deh,mau berapa elemen-nya..hehe.Kalau ada yang ingin ditanyakan mengenai artikel ini,tinggalkan saja komentar-nya yah..

Selamat meng-edit..^^

See u..

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

11 comments:

thanks bro trik nya.......

mampir....tukeran link yukz...!!:)

boleh-boleh aja... klo km dah copy link ak,tinggalkan pesan aja di shout-box.. pasti ak link-back koq..^^

Thanks bro trick_nya

mantep bro, triknya

Aduh, rasanya masih bingung Sob ^_^ maklum lah Newbie

thank gan,.. infonya

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

terimakasih infonya sangat bermanfaat

terimakasih infonya sangat bermanfaat

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra