Cara Membuat Footer Tiga Kolom Responsive di Blogger

Baca Juga

Footer adalah bawah blog yang biasanya berisi credit line atau keterangan hak cipta, misalnya Copyright (c) 2019 Contoh Blog. All right reserved.

Tilisan tahun dalam teks copyright bisa diatur otomatis. Tiap berganti tahun, maka angka tahun otomatis berganti. Lihat kode dan cara pasangnya di Memasang Tahun Copyright Otomatis.

Nah, di atas bagian footer itu, kita juga bisa pasang tiga buah widget, misalnya untuk label widget atau RSS Feed dari blog lain.

Agar bisa menambahkan widget di atas credit footer itu, pasang tiga kolom responsive berikut ini.

Cara Membuat Footer Tiga Kolom Responsive 

Untuk membuat footer widget tiga kolom responsive di di atas credit-footer, kita tinggal memasukkan dua jenis kode, yaitu kode CSS dan kode HTML. Hasilnya nanti seperti tiga kolom widget di footer seperti ini:

1. Klik Tema > Edit HTML
2. Copas kode CSS Footer Tiga Kolom Responsive berikut ini 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}
}

3. Copas kode HTML Footer Tiga Kolom Responsive di atas kode credit footer blog Anda, seperti di atas kode <div id='footer'> atau <div class='footer'>

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

4. Simpan template!

Setelah itu, klik Layout (tata letak) untuk memasang widget, misalnya label, feeds, atau lainnya.

Kode Membuat Footer Tiga Kolom Responsive Lainnya

Berikut ini kode lainnya dalam tutorial Cara Membuat Footer Tiga Kolom Responsive di Blogger. Cara memasangnya sama seperti di atas.

CSS
Pasang di atas kode </b:skin>

#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}
 @media screen and (max-width:1024px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:880px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:480px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:320px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}

HTML

<footer id="footer-wrapper">
 <b:section class='left section' id='left' preferred='yes' showaddelement='yes'>
  </b:section>
 <b:section class='center section' id='center' preferred='yes' showaddelement='yes'>
  </b:section>
 <b:section class='right section' id='right' preferred='yes' showaddelement='yes'>
  </b:section>
</footer>

Demikian Cara Membuat Footer Tiga Kolom Responsive di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*