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;
}
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>
<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>
<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
Post a Comment