Home » Blogging tutorial » Cara Membuat Footer Menjadi 3 Kolom di blog
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 heheapa 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'>7 - save template dan selesai kini footer blog sobat sudah menjadi 3 kolom :D
<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>
semoga bermanfaat ya cara membuat footer 3 kolom ini :)
Best Regard Rahasia Blog
cara membuat footer 3 kolom di blog
Langganan:
Posting Komentar (Atom)
nice tutorial dan banyak membantu, salam
BalasHapusKunjungan pagi sobatt
BalasHapusterima kasih untuk infonya sobat
info yang bagus sob.ikut menyimak ya sob
BalasHapusmantap nih artikelnya sob,, saran saya fontnya di ganti aja karena tak enak kalo di pandang,, bisa merusak mata.
BalasHapuswah,, ini cara manual ya??? manteb
BalasHapusWah bagus neh sob,,,,,,infonya\
BalasHapusboleh juga ne untuk dicoba ..nice post sob.
BalasHapusnice tips gan,,,
BalasHapusmakasih
Thanks infonya.. memang lagi mau ganti template blog nih.. supaya lebih cetar.. hehehe..
BalasHapus