Asrizal Wahdan Wilsa

Written By Master on Minggu, 03 Oktober 2010 | 07.35

Asrizal Wahdan Wilsa

Membuat Footer 3 Kolom dengan Background

Posted: 02 Oct 2010 11:55 PM PDT

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbZwnhX1e9xdIDHz5pz3L098u4eQ1kZaPArk1tXm5r6eCB7FkFAKvwh4KZaGwuU_7FKqZlxGkR-rSNjOnoZrTVzbfhivLyDCdGsmaOPDk4dOle6HhLaigWNSlbOrrXDE_hClURY_fa3Q/) 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----