Membuat Footer 3 Kolom dengan Background - Asrizal Wahdan Wilsa Sharing Media Membuat Footer 3 Kolom dengan Background

Post Top Ad

Membuat Footer 3 Kolom dengan Background

Share This
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----

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

Post Bottom Ad

Pages