Memasang 3 kolom pada footer blog kamu

Selasa, Desember 16, 2008 / Comments (1) / by fuda

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'>

<b:section class='footer' id='footer'/>
</div>

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>

Catatan :
Anda dapat merubah width (berwarna merah) dengan komposisi prosentase yang berbeda sesuai selera masing-masing.
Jika Anda ingin menambahkan kolom lagi, Anda juga harus merubah komposisi prosentase tersebut sedemikian rupa sehingga lebarnya menjadi 100%.
Anda pun dapat merubah warna dan panjang garis horisontal dengan merubah prosentasenya atau bahkan jika tidak menginginkannya, Anda dapat menghapusnya.
6. Kemudian letakkan kode berikut ini di atas kode ]]></b:skin>

#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. 
Sekarang Anda dapat menambahkan widget berjejer secara horizontal di footer blog Anda, seperti Anda lihat pada blog ini. ( Sumber artikel; tips-trik-blog.blogspot.com )
wekeke.. mudah kan...  Selamat mencoba..
Terima Kasih Telah berkunjung di hobikitakita-fuda.blogspot.com





1 komentar:

masdogan @ 20 April 2009 19.32

thanks mas atas infonya lagi nyari eh... dapetnya disini

Poskan 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"


Say it Here ..