Cara Membuat Footer Tiga Kolom Responsive - Desain Blog

Cara Membuat Footer Tiga Kolom Responsive - Desain Blog

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:

Footer Tiga Kolom Responsive


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.

Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Cara Membuat Footer Tiga Kolom Responsive - Desain Blog | Labels: Desain Blog edit this post
0 Komentar untuk "Cara Membuat Footer Tiga Kolom Responsive - Desain Blog"

Contact Form

Name

Email *

Message *