MENAMBAH DAN MEMBAGI ELEMEN HEADER MENJADI BEBERAPA KOLOM

Di sini saya ingin berbagi untuk sobat yang ingin membagi elemen header menjadi beberapa kolom. Sobat bisa menaruh daftar isi,iklan,link atau apa saja yang sobat suka. Jika satu kolom header yang tersedia dirasa masih kurang cukup untuk menambahnya sobat bisa ikuti beberapa langkah dibawah ini:

Disini kita akan coba menambah 4 kolom dibawah header yang nanti hasilnya akan terdapat 1 kolom penuh(100%) dan 4 kolom dari hasil pembagian (25% x 4). Selanjutnya kita masih bisa menambahkan lagi menjadi beberapa kolom.

Langkah-langkahnya:

1. Login ke blog sobat pilih tata letak kemudian klik edit html.
2. Jangan kasih tanda centang pada expand template widget.
3. Cari kode ]]></b:skin> dan letahkan kode dibawah ini diatasnya.

Hingga hasilnya seperti kode dibawah ini:

#under_header{
float:left;
width:100%;
}
#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
]]></b:skin>
4. Kemudian cari kode:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
&ltb:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

5. Jika sudah ketemu letakkan kode dibawah ini tepat dibawahnya hingga hasilnya sbb:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
<b:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>


<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

6. SIMPAN TEMPLATE kemudian klik tata letak. Jika yang nampak seperti pada gambar dibawah ini berarti kerja sobat sudah betul.



















Jika sobat ingin menambahkan lagi kolom yang sejajar dengan elemen tadi,sobat tinggal menambah(sisipkan)kode pada poin 3 dan 5.

Yang perlu sobat perhatikan pada poin 3 pada kode terkhir harus pada posisi right:

#under_header5{
float:right;
width:25%;
}

Tapi jika sobat ingin menambahkan beberapa kolom dibawahnya sobat perlu menambah kode dibawahnya lagi.

Ini adalah penambahan beberapa kolom dibawahnya:

#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:left;
width:33.33%;
}
#under_header7{
float:right;
width:33.33%;
}
#under_header8{
float:left;
width:50%;
}
#under_header9{
float:right;
width:50%;
}
#under_header10{
float:left;
width:100%;
}

Tambahkan juga kode pada poin 4 #under_header{ dengan menambah urutan angka-angka kodenya


<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>

<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>

<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>

<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>

<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>

<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>

Gambar dari Hasil penempatan kode-kode diatas:








44 komentar:

V_Co86 mengatakan...

mantap...thkas banget bro

Darmasena mengatakan...

@V_Co86: Sama2 bro... tank's tlah mampir.

Bisnis Mandiri Yang Paling Aman dan Menjanjikan mengatakan...

Lho kok punya saya expand widgetnya jadi kebawah ne pembagian kolomnya tidak mau kesamping...???
gimana nie padahal uda bener semua ni mas...

AHMAD mengatakan...

thk banget gan pelajaranya

cah ndeso mengatakan...

KOK GA BERHASIL??
CUMA TAMBAH 1 KOTAK MEMANJANG, SEPANJANG HEADER.
APA YANG SALAH YA??

Berbagi Kreativitas mengatakan...

Tips a ok sob...!
tapi knp ya klo blog aqu tampilnya g sejajar..melainkan menurun kebawah..! tolong y sob ? makasih.

Haris Pradipta mengatakan...

Ko malah jadi Galat?

Donny mengatakan...

wah terima kasih bang...nambah lagi nih ilmunya.....patut dicoba...

Besoul mengatakan...

gag berhasil

tampilannya malah kebawah

dedaLendra mengatakan...

kq ga bisa yah????

I Kadek Hariawan mengatakan...

thank gan,,,, :):)

rininingsih71 mengatakan...

Makasih banyak.... artikelnya dangan membantu saya sbg pemula.

kaos motivasi mengatakan...

mantap banget nih triknya....aku coba dl ya

Luthfie Dwi Radinda mengatakan...

yuhu :) aku bisa :D haha

mitraselluler mengatakan...

mantap infonya Bos,
cuma ane sdh coba tapi kolomny akoq bersusun ke bawah, bukan kesamping

mhn info baliknya

Byuti Sweet mengatakan...

kenapa gk bisa yya :(
padahal udah bner

ecosvan mengatakan...

gan kok nambambah nya jadi ke bawah,,
gk kesamping,,?
tp thanks ya atas ilmu nya,

jundan barofil mengatakan...

:) nice GAN ;) kapan kunjungblog saya...
:D gandroidzone.blogspot.com

jundan barofil mengatakan...

kok gagal terus ya...???

Bintang strangerz mengatakan...

KOK GA KETEMU SIH KODE DIATAS............ CARA CARANYA........
TOLONG BANTUAN NYA DONK...:(

rudi aienny mengatakan...

http://curhatz.blogspot.com/ : waduh Om kok gx bisa ya ?? :-o

Jefry mengatakan...

kalau untuk blogger yang versi terbaru kira2 caranya bagaimana ya ??
terima kasih

sunnahmu mengatakan...

sob blog ane nda ada kode div id='header-wrapper' trus gmn yach cara nambah widgetnya??

sbb templatenya masih bawaan bloger...mohon pencerahanya...thx

http://sunnahmu.blogspot.com/

Obat Asam Urat mengatakan...

Ohh, begitu ya gan,
akan ane coba dulu ya gan mudah mudahan aja berhasil.

gusdarto mengatakan...

numpang sedot gan... moga2 bisa, masalahnya sering coba jg yg beginian, tapi hasilnya nambah ke bawah aja. ga ada yang ke samping...tp tank infonya. salam blogger

agung nugroho Ijonk mengatakan...

asikk...thks.;)
artikel menarik buat kamu semua di http://agnfira.blogspot.com/

Blog Gratis mengatakan...

Thanks info tipsnya bermanfaat sekali gan,....

Susu Kambing Etawa mengatakan...

Thanks cara membagi footer menjadi 3 kolom

Perusahaan Susu Kambing Etawa mengatakan...

salam sukses dan makasih informasinya,..

Grosir Pulsa Elektrik mengatakan...

Makasaih tips cara membagi footernya

BLOG periklanan mengatakan...

OK gan ARTIKELNYA

Arial Solution mengatakan...

bermanfaat sekali artikelnya membantu!

Sari Madu Utama mengatakan...

makasih tutorial blogger membagi footer bermanfaat

Misseu Diihyun mengatakan...

ENGGAK BERHASIL :(
GIMANA NEH

benget nainggolan mengatakan...

BLOG YANG SANGAT MENARIK !!

jangan lupa visit blog saya juga http://parminum-tuak.blogspot.com/

terima kasih :)

Jayanti Tri Indriyani mengatakan...

gak berhsil gan, bingung!!!!!

koko Josemourinho mengatakan...

Thanks bermanfaat bangetss tulisanya

akademitelkom mengatakan...

makasih ya kak tutorialnya, jadi membantu untuk membuat header

Donaldmas Sepang mengatakan...

thanks infonya sob,sangat bermanfaat.

All of You mengatakan...

achmadfadel.blogspot.com
http://achmadfadel.blogspot.com/2015/06/mempercepat-loading-blog.html
http://achmadfadel.blogspot.com/2015/06/arti-html-php-perbedaanya.html
http://achmadfadel.blogspot.com/2015/05/cara-membuat-disclaimer.html
http://achmadfadel.blogspot.com/2015/06/mempercepat-loading-blog.html

achmadfadel.blogspot.com
http://achmadfadel.blogspot.com/2015/06/mempercepat-loading-blog.html
http://achmadfadel.blogspot.com/2015/06/arti-html-php-perbedaanya.html
http://achmadfadel.blogspot.com/2015/05/cara-membuat-disclaimer.html
http://achmadfadel.blogspot.com/2015/06/mempercepat-loading-blog.html

Achmadfadel.blogspot.com

Citra Amara mengatakan...

hmm menarik juga nih infonya, di tunggu juga nih di blog aku, mampir yah.
CARA MENYEMBUHKAN MATA MINUS TANPA OPERASI

diah wulandari mengatakan...

Terima kasih untuk informasinya Gan, salam kenal ya...
Software Pulsa PPOB | Software Pulsa Murah | Pulsa Elektrik Murah | Pulsa Murah | Pulsa PPOB Murah

Pak Oles mengatakan...

KONDOM
KONDOM GETAR
KONDOM SAMBUNG JUMBO

Klg club mengatakan...

Obat Pembesar Penis
Selaput Dara Buatan
Obat Penggemuk Badan
Obat Perontok Bulu
Obat Peninggi Badan
Peninggi Badan
Obat Pelangsing Badan
Kondom Getar
Obat Kuat VIAGRA
Penis Mutiara
KLG
Vagina Getar Goyang Suara
Obat Kuat V9
Pemutih Badan
Kondom Bergerigi
Kondom Crystal
Vakum Pembesar Penis
Penis Maju Mundur
Procomil Spray
Kondom Sambung
Obat Perangsang Wanita
Penis Ikat Pinggang
Penis Tempel
Vibrator
Obat Perangsang Serbuk
VigRX-plus
Pembesar Penis
Vagina Pantat
Ring Penis
Kondom Urat

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar