14 September 2009

Pin It

Cara Membuat Footer Multi Kolom

 Membuat Footer Multi Kolom | Khamardos's BlogHai sobat blog, Apa kabar kamu semuanya ? saya akan bagi tutorial bagaimana membuat/menambah box pada footer blog kita. Multi kolom disini maksudnya, kita bisa menambah box footer menjadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan anda.

Untuk Previewnya, anda bisa lihat pada blog saya ini dibagian paling bawah terdapat 3 box yang masih kosong (belum terisi, karena bingung akan memasukkan script apaan).Ok, bagi anda yang ingin memperbanyak ruang kolom pada bagian footer template anda.


Langsung aja kita mulai:

1. Login ke Blogger. Klik Tata Letak -> Edit HTML

2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan. (heheee... untuk jaga-jaga bila gagal)

3. Kalau sudah, klik (kasih Centang) Expand Template Widget. Lalu cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>




#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}


5. Jika sudah cari kode dibawah ini.


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


6. Hapus kode <b:section class='footer' id='footer'/> lalu ganti dengan kode dibawah ini.

Jika ingin membuat footer 2 kolom. Gunakan kode dibawah ini:


<div id='footer-column-divide'>


<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div style='clear:both;'/>
</div>

Jika berhasil maka hasilnya akan menjadi seperti ini
Preview :
 Membuat Footer Multi Kolom | Khamardos's Blog


Membuat footer 3 kolom. Gunakan kode dibawah ini:


<div id='footer-column-divide'>


<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Jika berhasil maka hasilnya akan menjadi seperti ini
Preview :
 Membuat Footer Multi Kolom | Khamardos's Blog


Membuat footer menjadi 4 kolom. Gunakan kode dibawah ini:


<div id='footer-column-divide'>


<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>
Jika berhasil maka hasilnya akan menjadi seperti ini
Preview :
 Membuat Footer Multi Kolom | Khamardos's Blog


7. Kalau sudah klik Save Template. Lalu klik Page Element.

Sebagai tambahan jika anda ingin mempertahankan footer aslinya. maka tambahkan kode dibawah ini diatas kode <div style='clear:both;'/>


<div style='clear:both;'/>
<p><hr align='center' color='#333333' width='95%'/></p>


<div id='footer-bottom' style='text-align: center; padding:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>

Selamat mencoba.
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

7 comments:

Klik Untuk Lihat Komentar

tips dan informasi on 14 September 2009 20.49 mengatakan...

hikhikhikhik...tutornya kedahuluan, soalnya rencana habis ramadhan mo nulis artikel kayak atas... semangat sob

!Ryan! on 15 September 2009 04.49 mengatakan...

Wach makin kreatif aja nich gan,teruskan berkreasi gan xixixi...:-)

Mufi_ed on 15 September 2009 13.36 mengatakan...

@ Tips dan informasi
heheeee....... thanks yach sob !! ;))

@ Ryan
Yupt Sob, Akan selalu berbuat untuk yang lebih baik !!! ;)

genial♂ on 15 September 2009 16.40 mengatakan...

wahhh keren nii.. o iy... kang.. sekedar konfirmasi.. waktu itu klu gag salah sampeyan ngajak tukeran link?!?!?!? mana link saiia?!?!? ntar mlm iia kang saiia pasang link akangnya di tempat saiia.. terimakasih :)

Mufi_ed on 15 September 2009 22.50 mengatakan...

@ genial♂
Thanks yach sOb !!! :D
Oh ya, Maaf saya lupa. Tapi sudah saya pasang link kamu sob, link back yach Sob.. maaf atas keterlambatan saya memasang link anda !!! :(

gani putra on 16 Oktober 2009 21.55 mengatakan...
Komentar ini telah dihapus oleh pengarang.
xamthone plus on 17 Maret 2011 10.22 mengatakan...

mantap juga nih tutorialnya sangat bermanfaat sekali gan , makasih gan buat infonya

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied