Cara Membuat 3 Kolom Dibawah footer :
1.
Login ke dashboard blogger anda.
2.
Pilih Rancangan > Edit HTML , centang Expand
widget template.
3.
Jangan lupa backup dulu template sobat dengan
mengklik Download full template untuk antisipasi jika terjadi kesalahan atau
sobat ingin mengembalikan templatenya ke kondisi semula.
4.
Cari kode ]]></b:skin>
pada template dengan bantuan Ctrl+F.
5.
Copy CSS dibawah ini dan paste tepat diatas kode
]]></b:skin>.
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 5px 8px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 00px 0px;
width: 942px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 8px auto;
padding-bottom: 3px;
width: 31%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
/* Footer
----------------------------------------------- */
#footer {clear: both;text-align: center;color: $textColor;}
.footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;}
#footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;}
#footer .widget h2 {text-align:left;}
#footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;}
#footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}
#footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;}
#footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;}
#footer-wrapper a:hover {color:#cccccc;font-weight:normal;}
#footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;}
#footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;}
#footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}
#lower {
margin:auto;
padding: 0px 0px 5px 8px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 00px 0px;
width: 942px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 8px auto;
padding-bottom: 3px;
width: 31%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
/* Footer
----------------------------------------------- */
#footer {clear: both;text-align: center;color: $textColor;}
.footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;}
#footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;}
#footer .widget h2 {text-align:left;}
#footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;}
#footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}
#footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;}
#footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;}
#footer-wrapper a:hover {color:#cccccc;font-weight:normal;}
#footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;}
#footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;}
#footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}
6.
Lanjutkan dengan mencari kode </body> pada template.
7.
Copy script dibawah ini dan paste tepat diatas
kode </body>.
<div id='footer-wrapper'>
<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>
<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>
8.
Simpan / Save template anda.
9.
Coba lihat hasilnya dengan masuk ke menu Page
Element atau elemen laman, jika berhasil maka pada elemen laman sobat akan
terlihat seperti gambar dibawah ini.
Nah itu tadi tips singkat cara membuat 3 kolom dibawah footer di blogspot sobat. Semoga bermanfaat.
SUMBER : http://www.rayhanzhampiet.com