Nggak mau ketinggalan artikel baru Blogger-Holic? Subscribe Sekarang
Hot Categories: Blogger News | Hack | SEO | Tips | Tutorial | more

Buat Section 3 Kolom

3.2.09 | 23 comments

Bro Firanza pernah nanya di sini cara bikin headernya gimana.
Jadi begini bro, saya menggunakan caranya Annie ngebuat 3 area kolum.

Section 3 Kolom
Nanti jadinya akan tercipta 3 area kolom seperti di atas. Mau..mau..mau?

Pertama2, backup template kamu dulu supaya tidak terjadi hal2 yg engga diinginkan.

Masuk ke Layout > Edit HTML
Tambahkan kode2 ini ke dalam CSS sheet, diantara <b:skin><![CDATA[/* dan ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
.footer-bottom {
padding: 10px;
}


Lalu, cari kode ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


Timpa <b:section class='footer' id='footer'/> dengan kode ini:
<div id='footer-column-container'>

<div style='clear:both;'/>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML22' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='HTML23' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-top' preferred='yes'>
<b:widget id='HTML24' locked='false' title='' type='HTML'/>
</b:section>
</div>

<p>
<hr align='center' color='#cccccc' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='HTML25' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>


save template.

Annie memang menggunakan trik ini untuk membuat bagian footer cellar nya. Kalo ingin menggunakannya sebagai header, bisa dengan meletakkan kode2 yg panjang tadi di bawah <div id='header-wrapper'>. Dan kamu bisa mengganti semua nama footer dengan header. Penggantian nama ini tidak berpengaruh apa2 terhadap tampilan Section. Jadi, engga kamu lakukan juga engga apa2.

semoga berhasil ;)


sumber lain yg mungkin membantu:
Cara mengatur layout kolom di blogspot

23 comments:

  1. makasih kode nya...iyah kl mo di bkin 4 kolom jd 25% y

    ReplyDelete
  2. @ Cebong Ipiet: bisa juga koq mba' bong.. tinggal disesuain dgn padding ama margin ny aja mngkn..

    ReplyDelete
  3. wah pinjam dong postingannya saya praktek langsung ah :D

    ReplyDelete
  4. jadi blog post-nya dimana?

    ReplyDelete
  5. @ Belajar Buat Website: maksudnya?? kan di sini kita engga utak-atik bagian blog-postnya, jadi blog-post ya tetap pada tempatnya :)

    ReplyDelete
  6. halah...kepalaku njelimet liat kode kodenya,mas,ada yg Instan gak?

    ReplyDelete
  7. @ Muhammad Qori: hhehe.. sbnernya tinggal copy-paste aja koq..

    ReplyDelete
  8. sayangnya aku pakai wordpress

    ReplyDelete
  9. sebenarnya keren and atraktif tapi....kok ribet yah

    hahha

    ReplyDelete
  10. Asyik.. dpt tambahan ilmu.
    Kebetulan lg nyoba2 lg di blogspot nih.

    Makasih mas Fariez..

    ReplyDelete
  11. sangat membantu ne
    :D
    ini khusus buat fotter ya?
    pernah baca tutorial kayak gini ...
    emang harus fotter_container ya kalo mo buat 3 kolom itu
    kalo di header gimana dunk?

    link blognya ini udah tak simpen di Flst Blogku
    tapi baru bisa mampir sekarang
    maap2 ya
    ^_^
    keep post ya..
    aku suka artikelnya
    ntar aku mampir lagi

    ReplyDelete
  12. wah...., makasih nie udah berbagi ilmu...

    ReplyDelete
  13. sayangnya gw gak pake blogger...

    ReplyDelete
  14. @ AndriRistiawan sebenernya jadi footer krn kita letakan di bawah.. kalo kita letakan di atas namanya jadi header :)
    semua id footer itu cuma sekedar nama aja koq mas, memudahkan tata letak kode css aja, jadi kalo mo diganti2 juga boleh..

    ReplyDelete
  15. Mau lihat contohnya bisa di blog saya Link Promo. Numpang promosi dikit ya mas Blogger Holic :)

    ReplyDelete
  16. thx mas atas infonya:) kotak footernya aq udah modif dikit. kalo mau lihat contohnya di sini

    ReplyDelete
  17. Aku ngga punya kode ini :
    <em><b:section class='footer' id='footer'/></em>
    gmn caranya pasang? aku udah nyari yang agak mirip dapatnya seperti kode ini :
    <b:section class='footer' id='abcd' preferred='yes' showaddelement='no'>
    <b:widget id='HTML3' locked='true' title='Footer' type='HTML'>
    <b:includable id='main'>
    <div id='footer'/>
    <div id='footerbox'>
    <div class='footer'>
    mohon pencerahnnya yah...!

    ReplyDelete
  18. waduh masih binggung juga nih dah dicoba belum brasil

    ReplyDelete
  19. @ banyumentah: coba ulang proses ny lagi.. pastiin langkah2 nya bner..

    ReplyDelete
  20. makasih tutornya, bisa ngak kalau dipasang di dua tempat header dan footer sekaligus, gimana caranya ya.....

    ReplyDelete
  21. Roti Bogor: bisa koq.. tgl id-nya aja dikasih nama yg beda..

    ReplyDelete
  22. udah ada 3 kolom footernyah bos bawaan sang pencipta templatenyah wkwkwkwkwkwk

    ReplyDelete