Senin, 12 Maret 2012

Cara Membuat Footer Menjadi 3 Kolom di blog

cara membuat footer 3 kolom di blog

- Footer biasanya adalah tempat credit sang empunya dan pembuat tempalate. biasanya 3 kolom di atas footer di butuhkan untuk blog yang memiliki widget sangat banyak. Jadi jika blog teman-teman memiliki banyak widget silahkan ikuti tutorial cara membuat 3 kolom footer di blog ini karena mungkin akan sangat bermanfaat untuk menghemat space di sidebar, ini solusi lain selain membuat tabview di blog untuk menghemat space sidebar kita. Footer 3 kolom yang akan kita buat ini bermainnya pada html dan css. jadi siapkan diri anda hehe

apa sih Footer 3 kolom itu?


Footer 3 kolom adalah footer yang memiliki 3 kolom tepat di atas footer blog, footer itu sendiri adalah tempat menaruh credit si pembuat template.

kelebihan footer 3 kolom ini?


Kelebihan dari footer 3 kolom ini adalah dapat menghemat space sidebar kita sehingga lebih terlihat rapi dan preofesional. Ini juga merupakan solusi bagi yang tidak mau memasang tab view java script di blognya. Footer kolon ini nanti bisa sobat isi dengan Daftar isi blog

kekurangan Footer 3 kolom ini?


mungkin dari sisi style dan tampilan akan sedikit hambar namun tidak masalah kalau teman-teman yang tidak mementingkan tampilan.. Karena Konten adalah Raja sesungguhnya :)

cara membuat footer 3 kolom di blog ini caranya bagaimana?


sangat simple dan mudah seperti saya katakan di awal posting kita akan membuatnya dengan bermain dan fokus pada html dan css. Maka langsung saja saya akan menjelaskan langsung rincian cara membuat footer 3 kolom ini ;

1 - Login dulu dong di blogger
2 - masuk tata letak >> edit html >> backup dulu templatenya saya nggak mau nanti ada yang protes kalo templatenya rusak gara-gara tutorial di blog rahasia ini
3 - cari kode ]]>
4 - masukkan kode dibawah ini diatas kode ]]> tadi
#footer-rahasia{
clear:both;
}
.footer-column {
padding: 10px;
}

5 - cari kode yang mirip dengan kode berikut
<div id='footer-wrapper'>
 <b:section class='footer' id='footer'/>
 </div>

6 - jika udah ketemu code di langkah nomor 5 silahkan paste ini tepat diatasnya
<div id='footer-rahasia'>
<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>

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

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

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

7 - save template dan selesai kini footer blog sobat sudah menjadi 3 kolom :D
semoga bermanfaat ya cara membuat footer 3 kolom ini :)
Best Regard Rahasia Blog

cara membuat footer 3 kolom di blog

Anda sedang membaca artikel tentang Cara Membuat Footer Menjadi 3 Kolom di blog dan anda bisa menemukan artikel Cara Membuat Footer Menjadi 3 Kolom di blog ini dengan URL http://carabuatsesuatu.blogspot.com/2012/03/cara-membuat-footer-menjadi-3-kolom-di.html. Anda boleh menyebarluaskannya atau meng-copy paste-nya jika artikel Cara Membuat Footer Menjadi 3 Kolom di blog ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan LINK Cara Membuat Footer Menjadi 3 Kolom di blog sebagai sumbernya.

9 komentar:

  1. nice tutorial dan banyak membantu, salam

    BalasHapus
  2. Kunjungan pagi sobatt
    terima kasih untuk infonya sobat

    BalasHapus
  3. info yang bagus sob.ikut menyimak ya sob

    BalasHapus
  4. mantap nih artikelnya sob,, saran saya fontnya di ganti aja karena tak enak kalo di pandang,, bisa merusak mata.

    BalasHapus
  5. wah,, ini cara manual ya??? manteb

    BalasHapus
  6. Wah bagus neh sob,,,,,,infonya\

    BalasHapus
  7. boleh juga ne untuk dicoba ..nice post sob.

    BalasHapus
  8. Thanks infonya.. memang lagi mau ganti template blog nih.. supaya lebih cetar.. hehehe..

    BalasHapus

Back To Top