728x90 AdSpace

HEADLINE NEWS

02 Oktober 2010

Membuat Footer 3 Kolom, Membuat Footer 3 Kolom dengan Background itulah yang akan saya paparkan pada tutorial kali ini. setelah pada postingan sebelumnya saya pernah membahas mengenai pasang emotion pada postingan blogspot. Membuat footer 3 kolom mempunyai banyak fungsi, yaitu tidak menitik beratkan widget untuk selalu ada di sidebar dan memperbanyak ruang untuk menyimpan widget terutama widget yang memiliki loading cukup lama, maka dengan menyimpannya di halaman footer, loading blog akan terselamatkan.
Untuk tampilannya dapat dilihat pada bagian footer blog ini atau melalui gambar dibawah ini :
lalu bagaimana cara membuat footer menjadi 3 kolom ini? mari kita simak tutorialnya.
  • Login ke account blog sobat
  • Klik rancangan
  • Klik edit html dan expand widget template
  • Cari kode ]]></b:skin>
  • Letakkan kode css dibawah ini diatas kode ]]></b:skin>
#bottom{background:#444 url(http://lh6.ggpht.com/_mWNaJ9OwpbA/TKgjyRFkIaI/AAAAAAAAA2s/JCbutoxzlWU/footerbawah.jpg) 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:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; 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}
  • Cari kode <!-- end content-wrapper --> atau  </div> <!-- end content-wrapper-->
  • Letakkan 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>
  • Simpan hasil kerja anda dan lihat hasilnya
Note :  Kode bercetak tebal berwarna orange dan hijau silakan disesuaikan dengan template dan dapat diubah sesuai keinginan.
----Selamat Mencoba dan Semoga Bermanfaat----
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

5 komentar:

  1. bisa tambah meriah nih kalo tiga kolom :D.. makasih tipsnya :)

    BalasHapus
  2. Ijin mencoba kawan.

    Thx for share... :n:

    Salam

    BalasHapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Membuat Footer 3 Kolom dengan Background Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top