1.3. Membuat Footer di Blog

Ditulis oleh: -
Ngomong-ngomong soal footer, sudah pasti akan di letakkan tepat paling bawah dari segalanya. Disini kita akan membuat footer yang akan memuat 3 widget. Jadi jika dibagi tiga widget, kurang lebih ukuran tiap widget nya 33%. Namun kita akan membuatnya kurang dari 33%.

Langsung aja ke TKP yaaa...

Letakkan CSS berikut tepat di atas */ ]]></b:skin>
#footer-wrapper{
width:100%;
clear:both;
}
.footer h3, .footer h2{
color: #fff;
padding: 4px 8px;
background: #3384cc;
background: linear-gradient(top, #3384cc , #2a79bf);
background: -webkit-linear-gradient(top, #3384cc , #2a79bf);
background: -moz-linear-gradient(top, #3384cc , #2a79bf);
background: -o-linear-gradient(top, #3384cc , #2a79bf);
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
border-bottom: 2px solid #ccc;
text-shadow: 1px 1px 0px #283744;
margin: 0px;
margin-bottom: 5px;}
.footer{
width:32%;
padding:5px;
}
#footer-1{
float:left;
}
#footer-2{
float:left;
}
#footer-3{
float:right;
}

Penjelasan:
Footer-wrapper berukuran 100% dan jika ada yang lebih akan disembunyikan
Footer1 berada di kiri
Footer2 berada di kiri sebelah footer1
Footer3 akan ada di kanan
Ukuran umum footer 32%

HTML nya Letakkan tepat di atas </div> terakhir
<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer> 

Nanti akan seperti ini
<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer>
</div></body>


Silahkan simpan template dan lihat hasilnya, selamat anda sudah dapat membuat template tanpa responsive!
Tapi Tunggu, di artikel CSS nya berantakan! Tunggu artikel selanjutnya yaaa :)

2komentar:

  1. Nice Info,, nih tutorial cocok banget ane mau experiment template

    ReplyDelete
  2. Ishma mau coba ini kemaren..cuman gabisa. Ntar coba lagi deh. Thanks infonya

    ReplyDelete