Browse » Home » » Membuat Footer Menjadi 4 Kolom

Membuat Footer Menjadi 4 Kolom

Pusing cari inspirasi,..eehh..akhirnya dapat juga buat postingan, malam ini adalah malam minggu, malam yang lumayan puaanass udaranya, kayaknya mau turun hujan nih,..walah kok ngomongin masalah hujan.., baiklah sobat blogger mari kita sedikit berbicara masalah kolom FOOTER dengan menjadi 4 (empat) bagian atau biasa kita sebut dengan FOOTER menjadi 4 (empat) kolom, pada postingan hari yang kemarin saya sudah mempublikasikan tutorial cara membuat FOOTER menjadi 3 kolom, kali ini saya akan menambahkan satu kolom lagi jadi jumlahnya ada empat kolom ( walah banyak banget...) mungkin secara tidak kebetulan Anda sedang mememikirkan hal tersebut di atas bagaimana cara buat FOOTER menjadi 4 (empat) kolom,..Nah sekarang mari kita lihat langkah-langkahnya di bawah ini. ( Artikel ini sebelum di publikasikan sudah kami coba di beberapa Template Blogspot dan hasilnya bisa Anda lihat sendiri nanti )

* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah yang PERTAMA, Silahkan Sobat Blogger Copy Kodes CSS di bawah ini, kemudian Paste di atas kode >>> ]]></b:skin>

#lower1 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower2 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower3 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower4 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}


* Selanjutnya Langkah yang ke DUA Copy kode script di bawah ini, Lalu Paste di atas kode ini >>> <!-- end outer-wrapper -->

<div class='clearfloat' id='lower'>
<div class='clearfloat' id='lower1'>
<b:section class='extra-bottom' id='extra-bottom1' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower2'>
<b:section class='extra-bottom' id='extra-bottom2' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower3'>
<b:section class='extra-bottom' id='extra-bottom3' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower4'>
<b:section class='extra-bottom' id='extra-bottom4' preferred='yes' showaddelement='yes'/>
</div>
</div>
<div class='clear'/>


* Dan yang terakhir jangan lupa Klick SAVE TEMPALTE / SIMPAN TEMPLATE

* Selesai dan Selamat Berkarya.

@ Untuk nomor kode yang saya beri warna BIRU, nanti bisa Anda sesuaikan di template Blog milik para Sobat Blogger.

@ Sukses selalu buat Sobat Blogger Semua.
@ Jangan Lupa Komentarnya ya...

DEMO GAMBAR FOOTER MENJADI 4 BAGIAN / 4 KOLOM

20 Comments To Membuat Footer Menjadi 4 Kolom

Infonya sangat bermanfaat!! Thanks buanget!! :D
°l||l°
Hikmah San mengatakan pada
 
°l||l°
nice tutorial sob.. :D
kapan2 coba ah. hehe..
°l||l°
Blogger Ceria mengatakan pada
 
°l||l°
boleh juga tuh..
°l||l°
AnJeLaNeT Palangkaraya mengatakan pada
 
°l||l°
Nice Information thanks pal
°l||l°
Health Living Guide mengatakan pada
 
°l||l°
mantab tutorialnya thanks yaa
°l||l°
anak nelayan mengatakan pada
 
°l||l°
MAS ADA AWAARD NIEH. . . UNTUK PER2NAK-NIK.BLOGSPOT.COM DIAMBIL YCH... SALAM PERSAHABATAN........
°l||l°
TUKANG NGGAME | BLOG ANAK IT mengatakan pada
 
°l||l°
thanks banget bosss.... salam banget dari indoster.blogspot.com
°l||l°
rajalampu.blogspot.com mengatakan pada
 
°l||l°
boleh juga infonya sobat...
saya baru saja buat artikel ttg kolom pd turnoutmag..

salam
by yosaadi.blogspot.com

4 kolom turnout mag
°l||l°
Blog Yos mengatakan pada
 
°l||l°
Boleh nih infonya.. makasih ya..
°l||l°
Saung Web mengatakan pada
 
°l||l°
Dicoba dulu ah.. eh lupa makasih ya..
°l||l°
Iklan Baris Gratis dan Bisnis Internet mengatakan pada
 
°l||l°
keren nih.... bagi yang baru belajar seperti saya.
Thx sob..
°l||l°
Ica mengatakan pada
 
°l||l°
Bagus sekali infonya yang sangat membantu, makasi banget.
°l||l°
All TV Service Menu mengatakan pada
 
°l||l°
makasih atas tutorialnya....boleh ndak saya pasang tutornya di blog saya (tentunya ada link bahwa anda penulisnya)
°l||l°
syahrul mengatakan pada
 
°l||l°
punya saya sudah saya modif, jadi susah banget..bingung juga nich. udah beberapa kali dicoba gagal terus bro..
°l||l°
rumah blogger mengatakan pada
 
°l||l°
iya, kadang template menyediakan footer yg terbatas, jadi gini ya caranya. terima kasih atas share ilmunya nich
°l||l°
sabirinnet mengatakan pada
 
°l||l°
wah keren..
makasih infonya
°l||l°
Fadly mengatakan pada
 
°l||l°
kok saya gak bisa ya
malahan muncul code diatas header blog saya
°l||l°
Xxxx mengatakan pada
 
°l||l°
berhasil
horeee. . . .


::terima kasih::
°l||l°
Muhammad Chandra mengatakan pada
 
°l||l°
artikel yang menarik, saya coba di blog dan it's work ...... :-)
makasih.
°l||l°
Unknown mengatakan pada
 
°l||l°
gak bisa...
°l||l°
Sultan Budi Lenggono mengatakan pada
 
°l||l°

Send Your Comment Here

Pernak Pernik Blogger | Copyright 2010 | Template Design © By IMS | Powered By Blogger