Cara Membuat Footer Tiga Kolom Responsive

Posted by Riyanto Style on Sunday, November 5, 2017

Membuat Footer Tiga Kolom Responsive di bawah halaman blogger atau di atas credit-footer tinggal memasukkan dua jenis kode, yakni kode CSS dan kode HTML seperti di bawah ini.

KODE CSS Footer Tiga Kolom Responsive
Simpan di atas kode ]]></b:skin>

#lower{margin:0 auto;padding:1px;width:97%;background:#333}
#lower-wrapper{margin:0 auto;padding:20px 0;width:100%;border:0}
#lowerbar-wrapper{float:left;margin:0 5px auto;padding-bottom:20px;width:32%;text-align:left;color:#ddd;font:bold 12px Arial,Tahoma,Verdana;line-height:1.6em;word-wrap:break-word;overflow:hidden}
.lowerbar{margin:0;padding:0}
.lowerbar .widget{margin:0;padding:10px 20px 0}
.lowerbar .widget h2{font:normal 300 16px Oswald,Arial,sans-serif;margin:0 0 10px;padding:7px 0;border-bottom:2px solid #ddd;text-transform:uppercase;position:relative;color:#fafafc}
.lowerbar .widget h2:after{content:" ";width:90px;height:0;position:absolute;left:0;bottom:-2px;border-bottom:2px solid #e74c3c;content:" ";width:90px;height:0;position:absolute;left:0;bottom:-2px;border-bottom:2px solid #e74c3c}
.lowerbar ul{color:#fff;margin:0 auto;padding:0;list-style-type:none}
.lowerbar li{display:block;color:#fff;line-height:1.6em;margin-left:0!important;padding:7px 0;border-bottom:1px solid #222;list-style-type:none;text-align:left}
.lowerbar li:last-child{border-bottom:none}
.lowerbar li a{text-decoration:none;color:#DBDBDB}
.lowerbar li a:hover{text-decoration:underline}
.lowerbar li:hover{display:block;background:#222}
@media only screen and (max-width:768px) {
#lower,#lower-wrapper{overflow:hidden!important;width:100%!important}
#lowerbar-wrapper{overflow:hidden!important;width:95%!important;padding:5px}
#credits p{text-align:center!important}
}

KODE HTML Footer Tiga Kolom Responsive
Simpan di atas kode credit footer blog Anda.

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>