14 November 2011

Cara Menambahkan 3 Kolom Di Bagian Footer

Do you want to share?

Do you like this story?

Sebenarnya Menambahkan kolom tambahan ke bagian footer Anda akan memberikan lebih banyak ruang berharga untuk widget blog, dan juga berkontribusi "Web 2.0" modern banding untuk desain blog Anda.

Hanya ada empat langkah utama untuk tutorial ini, dan semua proses secara keseluruhan cukup sederhana. hack ini footer adalah khusus untuk blog yang memiliki lebar yang berbeda dan gaya, dan sebagainya bloggerbuster telah merancang solusi cairan yang harus bekerja di setiap template layout Blogger.



Membuat kolom baru Footer
Back up template blog yang ada! Sebelum membuat modifikasi pada template blog Anda!

Untuk membuat cadangan template yang ada Anda, pergi ke Template> Edit HTML di dashboard Blogger Anda, dan klik pada link "Full Download Template" di dekat bagian atas halaman. Anda kemudian dapat menyimpan file yang ada template XML untuk komputer Anda.

Tambahkan kode ekstra untuk bagian footer
Pergi ke Template> Edit HTML di dashboard Blogger Anda, dan jangan centang "Expand Template Widget" kotak (ini menyederhanakan proses).

Sekarang Anda perlu menemukan bagian ini dalam template Anda:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

kita perlu mengubah code yang berwarna merah dengan code berikut:
<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 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>

Menambahkan style untuk bagian footer baru
Cari kode </b:skin> lalu letakkan code berikut sebelum kode </b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
Sekarang Anda telah selesai menambahkan bagian-bagian baru untuk footer Anda, pergi ke bagian Tata Letak Anda dashboard Blogger (Template> Tata Letak), dan Anda akan melihat kolom baru tiga, ditambah bagian yang lebih rendah yang membentang lebar dari semua kolom tiga, untuk yang kini Anda dapat menambahkan widget baru!


Saya menambahkan garis horizontal ke bagian footer untuk memastikan bahwa ada perbedaan yang jelas antara konten di kolom footer dan konten dalam bagian bawah yang lebih luas. Jika Anda ingin mengubah warna baris ini, Anda dapat melakukannya dengan mengganti nilai warna dengan warna yang berbeda:
<hr align='center' color='#5d5d54' width='90%'/>

SELAMAT BERKREASI.............

ARTIKEL TERKAIT :

9 komentar :

  1. Terimakasih tutorialnya sangat membantu sekali nagi newbie seperti saya...


    http://www.regensaid.blogspot.com
    Template Gratis : http://www.free-222.blogspot.com

    ReplyDelete
  2. @Regen Said
    O.K Gan....selamat mencoba + otak-atik :)

    ReplyDelete
  3. nice tutorila gan :) terus berkarya... :D

    ReplyDelete
  4. gan saya mau nanya nih, kalo mau nambah content di samping releated articel kaya punya agan gmana ya? kbetulan template saya mirip sama punya agan, mohon bimbingan nya buat newbi ini y gan .. :)
    ini blog saya vezhphoria.blogspot.com

    ReplyDelete
  5. @Vezhphoria
    Setelah saya liat Source code template blog sobat,jika sobat ingin menambah content disamping Related artikel...cari kode ini:
    <div id='banner-ads'>
    </div>
    Eksekusinya:
    <div id='banner-ads'>
    DISINI SOBAT MELETAKKAN CODE CONTENT

    </div>

    ReplyDelete
  6. Makasih banget gan, udah jadi ini pasang content nya.. \o/

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Cara Menambahkan 3 Kolom Di Bagian Footer Oops ! | Error 404