Cara Membuat Footer Tiga Kolom

Posted on Friday 9 April 2010




Saya yakin sobat dapurblogger banyak yang merasa tidak puas dengan template bawaan pabrik..(kayak motor aja..weleh..weleh.. hi..hi..hi..

Template bawaan blogger memang masih sangat sederhana, sebenarnya ini adalah suatu hal yang bagus, karena dengan sederhananya desain template asli blogspot para sobat dapurblogger dituntut untuk kreatif dan berfikir bagaimana caranya memodifikasi template ini menjadi lebih keren. Untuk merubah template blog banyak sekali cara yang dilakukan, diantaranya dengan merubah footer bawaan template asli menjadi tiga kolom. Template blogspot dengan footer satu kolom memang terasa kurang maksimal hasilnya, karena kita tidak akan leluasa memperbanyak widget pada blog. 

footer tiga kolom

Dengan Footer tiga kolom ini kita akan lebih bisa mengatur tata letak widget sesuai dengan keinginan kita. Walaupun Footer tiga kolom ini tidak menjamin bahwa blog kita akan kelihatan bagus. walaupun footer tiga kolom sudah jadi, kreatifitas sobat dapurblogger tetap harus di utamakan. Karena kreatifitas ini yang akan menentukan kualitas display page dari blog sobat dapur blogger Supaya penambahan kolom footer menjadi tiga kolom tidak akan menjadi hal yang percuma.kutu buku

Merubah footer menjadi tiga kolom ini sebenarnya tidak terlalu sulit, hanya di perlukan otak-atik pada HTML sobat dapurblogger untuk merubah footer satu kolom bawaan blogger menjadi footer tiga kolom.

Untuk merubah footer menjadi tiga kolom ada beberapa kode yang harus ditambahkan kode yang harus di ganti. Kalau sobat blogger tidak ada kesalahan dalam penulisan kode ini, saya yakin footer tiga kolom pasti akan berhasil dibuat oleh sobat dapurblogger.

Cara-cara merubah footer menjadi tiga kolom adalah sebagai berikut. Ikuti langkah-langkah membuat footer tigak kolom ini dengan teliti dan telaten ya..mengerlingkan mata
Berikut cara merubah footer menjadi tiga kolom:
1. Login ke account blog sobat daprublogger
2. Klik customize
3. Klik Edit HTML

A. Cari kode dibawah ini:

                            ]]></b:skin>

B. Letakkan kode di bawah ini sebelum kode di atas

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

C. Cari kode di bawah ini

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


D. Ganti kode di atas 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>
<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>









Save dan lihat hasilnya.
Footer sobat dapurblogger sudah menjadi tiga kolom. Kalau sobat dapur blogger akan mengganti footer tigak kolom menjadi empat kolom, sobat dapur bloger tinggal menambahkan angka pada footer menjadi footer 5 atau footer menjadi 6. tentunya nilai persentasenya harus di rubah.
Dalam merubah footer template menjadi footer tiga kolom, yang harus di perhatikan adalah nilai dari width template sobat dapurblogger. Apakah satuannya menggunakan pixel (px) atau menggunakan prosentase ( % ). Kalau template sobat dapur blogger menggunakan pixel, maka kode prosentase pada kode footer tiga kolom harus di ganti menjadi pixel, dan sebaliknya apabila template sobat dapurblogger menggunakan satuan prosentase, kode footer tiga kolom tidak perlu di ganti.

Semoga footer sobat dapur blogger berhasil di rubah menjadi footer tiga kolom, dan Blog sobat dapurblogger bisa semakin enak dan indah dari segi displaynya..


Selamat mencoba, Semoga berhasil

dan..
Semoga bermanfaat..


No comments:

Post a Comment

Blog Ini Dofolow.
Komentar yang tidak sesuai dengan content yang di bahas, akan di hapus.

loading...

Blog Archive

© Dapurblogger. Template by Template Responsive Design Powered By Blogger