Saturday, April 18, 2009

Buat Section 3 Kolom

Bro Firanza pernah nanya di sini cara bikin headernya gimana. Jadi begini bro, saya menggunakan caranya Annie ngebuat 3 area kolum. 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

2 komentar:

Anonymous said...

udah ciboba berhasil.. thakyu ya..

junkdiller said...

sim-sim

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.