Akhirnya!
Wahaha, setelah skian lama dapet juga nih tutorial cara bikin 3 kolom di bawah blog. Mumpung masi anget dan hasilnya ga mengecewakan.kita bahas yuk. Soalnya udah beberapa tutorial yang saya coba hasilnya slalu berantakan. Untung muka ga ikut berantakan huehuehe...
Ini sebenernya juga rada bikin bingung ada erornya. sang sumber nulis script komentarnya salah karna copas kali ya jadinya ga ke check. contoh dia ngetik scriptnya bgini <!--kolom pertama--!> padahal harusnya <!--kolom pertama-->. Berhubung saya ga bego2 amat akhirnya ketemu jawabannya hoho. Tapi saya ucapkan terima kasih sama dia, dah berbagi ilmu. akhirnya ilmu ini sampe ke kamu kamu juga.
Langsung aja, ga pake lama simak ye...
Langkah-langkahnya sebagai berikut. (Oh, iya sebelum melakukan pengeditan HTML, jangan lupa untuk melakukan back up terlebih dahulu untuk mengantisipasi hal-hal yang tidak kita inginkan).
1. Login ke http://blogger.com hingga masuk Dasbor
2. Klik Tata Letak (layout)
3. Klik tab Edit HTML
4. Kemudian cari dan temukan kode seperti di bawah ini.
<div id='footer-wrapper'>
5. Ganti kode yang berwarna biru dengan kode di bawah ini.
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div><!--kolom pertama-->
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div><!--kolom kedua-->
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div><!--kolom ketiga-->
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p><!--garis horisontal-->
<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='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
7. Kemudian Simpan Template
8. Selesai
Nah, setelah berhasil, pada menu elemen halaman, Anda akan mendapati footer dengan multi kolom, seperti di bawah ini.
1 komentar:
thanks mas atas infonya lagi nyari eh... dapetnya disini
:f :D :) ;;) :x :$ x( :?
:@ :~ :| :)) :( :s :(( :o
Posting Komentar
Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).
Ketik shortcutnya saja untuk menggunakan emoticon contoh ":D"