Mungkin saat ini atau sebelumnya sobat Blogger ada rasa ke inginan bagaimana cara membuat FOOTER menjadi 3 kolom, nah..., disini bisa anda lihat/dapatkan bagaimana caranya membuat FOOTER menjadi 3 kolom atau 3 bagian yaitu kolom kiri, kolom tegah, dan kolom kanan, Mari kita mulai cara membuatnya, silahkan Sobat lihat langkah-langkahnya sebagai berikut di bawah ini :
* Sign in seperti biasa di blogger dengan id milik sobat.
* Klik menu Layout
* Klik menu Edit HTML
* Klik tulisan Download Full Template
* Beri tanda centang pada kotak di samping tulisan Expand Widget
Template
* Langkah yang PERTAMA copy kode CSS di bawah ini kemudian Paste di
atas kode ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
* Langkah ke DUA Silahkan cari kode script seperti di bawah ini :clear:both;
}
.footer-column {
padding: 10px;
}
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
* Dan Langkah yang ke TIGA Jika kode script di atas tadi sudah Anda ketemukan, kemudian ganti kode di atas yang saya beri warna BIRU dengan kode script di bawah ini :
<div id='footer-column-container'>
<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;'/>
</div>
<div id='footer3' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</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;'/> </div>
<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' 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='Text2' locked='false' title='' type='Text'/> </b:section>
</div> <div style='clear:both;'/>
</div>
<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;'/>
</div>
<div id='footer3' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</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;'/> </div>
<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' 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='Text2' locked='false' title='' type='Text'/> </b:section>
</div> <div style='clear:both;'/>
</div>
* Lalu SAVE TEMPLATE
Kode yang saya beri warna MERAH, Anda bisa merubahnya sesuai dengan
selera
* Selesai dan Selamat Mencoba.
Tutorial Blog
- Menampilkan Icon Di Samping Judul Postingan
- Membuat Tombol Top Up
- Cara Mendisable Klik Kanan & CTRL+U pada Keyboard
- Cara Membuat Daftar Isi Di Widget Blogspot
- Cara Membuat Artikel Terkait (Related Post) Di Blogspot
- Cara praktis Membuat Read More Di Blogspot
- Cara Membuat Menu Horizontal
- Cara cek blog do follow dengan add on mozilla
- Membuat Recent Comments
- Membuat Widget Kotak Blogroll Menghemat Tempat
- Membuat Show-Hide (spoiler)
- Text Area Dengan Memakai HighLight
- Membuat Judul Blog Bergerak Versi 2
- Membuat Judul Blog Bergerak Dari Kanan ke Kiri
- Cara Menghilangkan Tanggal Posting
- Cara Menghilangkan Navbar Blogger
- Membuat Read More Di Setiap Postingan
- Memberi Rainbow Effect (Efek Pelangi) Pada Link Hover
- Membuat Bingkai Untuk Sebuah Tulisan Atau Gambar
- Menambah Smile Cbox Dan Shoutmix
- Google Translate
- Flag Counter
Tidak ada komentar:
Posting Komentar