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:

Anonim mengatakan...

mantap...thkas banget bro

Darmasena mengatakan...

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

Bisnis Super Mutakhir 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??

Unknown 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...

Unknown mengatakan...

gag berhasil

tampilannya malah kebawah

Mailendra 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,

Unknown mengatakan...

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

Unknown mengatakan...

kok gagal terus ya...???

Unknown mengatakan...

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

Unknown 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

Unknown 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

Jeng Dyah mengatakan...

ENGGAK BERHASIL :(
GIMANA NEH

Unknown mengatakan...

BLOG YANG SANGAT MENARIK !!

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

terima kasih :)

Unknown mengatakan...

gak berhsil gan, bingung!!!!!

Adyarto Advertising mengatakan...

Thanks bermanfaat bangetss tulisanya

Anonim mengatakan...

makasih ya kak tutorialnya, jadi membantu untuk membuat header

donald sepang mengatakan...

thanks infonya sob,sangat bermanfaat.

Unknown 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

Unknown mengatakan...

KONDOM
KONDOM GETAR
KONDOM SAMBUNG JUMBO

alaa omran mengatakan...

شركة المتحدة
دليل شركات نقل العفش
شركة نقل اثاث بالمدينة المنورة
شركة نقل اثاث بالرياض
شركة نقل اثاث بجدة
شركة نقل اثاث بمكة
شركة نقل اثاث بالطائف
شركة نقل اثاث بينبع
شركة نقل اثاث بالدمام
<

Indexing Blogger mengatakan...

pikir menunjuk layanan tukang bangunan
desain rumah minimalis terbaru
cara menghitung biaya membangun rumah
tahapan pembangunan rumah dari awal
pengertian jenis dan komponennya
cara membangun pondasi rumah sederhana

Indexing Blogger mengatakan...

Ilmu Bangunan

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