Membuat Footer 3 Kolom Dengan Background

Viyan Pradita Kamis, Maret 31, 2011 ,

Met pagi sobat blogger, pagi ini saya akan membahas lagi pastinya tentang blogging, yaitu cara membuat/menambahkan 3 kolom di halaman foter dengan background. pastinya membuat lebih bayak ruang di blog kita, dan lagi dengan adanya penambahan halaman/kolom di foter ini, kita bisa menaruh widget yg lumayan berat loadingnya ke halaman foter tersebut, lumayan lho buat memperkecil berat loading blog... yang pasti di bandingkan ditaruh di sidebar dengan di halaman foter itu berbeda. [itu menurut pengalaman saya]... selebihnya sobat bisa buktikan sendiri.
Berikut contoh screenshotnya:

Screenshot


Berikut cara membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Klik Edit HTML
4. Beri centang "Expand Widget Templates"
5. Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
6. Lalu cari kode berikut: ]]></b:skin>
7. Letakan kode berikut tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}


Penting!!
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...


8. Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
9. Letakan kode berikut diatas kode: </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

10. Simpan template, dan lihat hasilnya.

Sippp... selamat mencoba dan semoga bermanfaat... Salam blogging \m/

Ditulis Oleh :

Artikel Membuat Footer 3 Kolom Dengan Background ini dipublish pada hari: Kamis, Maret 31, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

17 komentar
Terjun Ke Kolom Komentar

  1. Terima kasih tutorialnya. Blog trustco juga memakai footer 3 kolom. Hanya saja itu bukan buatan saya. Sudah ada dari templatenya KR. Alhamdulillah, sekarang dapat ilmunya

    Salam ukhuwah

    BalasHapus
  2. @Kunci Surga: Sipp Mas, sama2... Terimakasih buat kunjungannya :)

    BalasHapus
  3. Mantaabbb.. Bisa dicoba.. hehehe...

    BalasHapus
  4. richard howin11 April 2011 20.16

    mantap mas tutorialnya ini yang saya cari2 akhirnya ketemu juga :D

    BalasHapus
  5. @Candra Aditya: Sep, Met mencoba sob

    @richard howin : Hehe, silahkan dicoba

    Terimakasih utuk komentarnya sob :)

    BalasHapus
  6. tengkyu atas triks gan...

    BalasHapus
  7. @Kang Nur: Iya, sama2 Mas :)

    BalasHapus
  8. nggon nyong anu setitik postingane ora footer2an lah :malu:

    BalasHapus
  9. matur tanks gan! jadi ane gak ganti template!

    tinggal nyari tad cloudnya ;))

    BalasHapus
  10. @gunung sindoro: hohoho,, tambahin lah, biar makin rame :P

    @tigefa dot info: Sip, sama2 masbro :D

    BalasHapus
  11. maaf gan, di blog ku ga ada kode end content-wrapper
    tolong pencerahannya!!!:(

    BalasHapus
  12. aku sih udah coba dan berhasil cara merubah lebarnya gimana gan ? kalo udah tau kirim ke eko_yulianto.9epph@yahoo.co.id

    BalasHapus
  13. WADOOHHH...PUSING NI GAN, KODENYA BANYAKAN GAK ADA DI TEMPLATE SAYA NIH...Media Info (www.mediainfomitra.blogspot.com

    BalasHapus
  14. wadoohh kodenya banyakan gk ada di template sy nih gan...Media Info(www.mediainfomitra.com

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers