How to Footer Column 3 in 1

Hayy Zackmaru buddy tonight I would want to share the trick bloggers how to make cool footer with 3 fields below and one column on it. as can be seen diBlogku own demo. \ (~ ▿ ~ \)

How to do (¬ _ ¬ ")

•      Design> Edit HTML
•      Then find this code]]> </ b: skin>
•      After that, put this code right above it.

#footer-wrapper {
    clear: both;
    text-align: center;
    margin: 0;
    padding: 15px;
}
.credits {
    width: 900px;
    font-size: 95%;
    margin: 0;
    padding: 0;
}
#bottom {
    background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF81Samin_-esT31ANxBQVT-J0Cc6JXmA0D-_Ndpvb5-q9DotiTo8KKW37hut8re-WfgGVL3eEdiL44zpu1gn7aUqih_3GtdKKe1J6AlCor_D9D_1iY26nybDy3rr68b_OtS36a62yjV54/s1600/bgstripe.png) repeat-x;
    width: 900px;
    position: relative;
    clear: both;
    float: center;
    color: #fff;
    border-top: 3px solid #bdbdbd;
    box-shadow: 0 0 8px #000;
    border-top-right-radius: 70px;
    border-top-left-radius: 70px;
    margin: 0 auto;
    padding: 0 0 10px;
}
#bottom h2 {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    line-height: 1.5em;
    text-transform: uppercase;
    text-align: center;
    border-top: 2px dotted #8c8c8c;
    border-radius: 20px;
    margin: 0 0 5px;
    padding: 0 0 10px;
}
#bottom ul {
    color: #9A9A9A;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}
#bottom ul li {
    list-style-type: circle;
    text-align: left;
    margin: 3px 0 0 15px;
}
#ZMKiri {
    width: 270px;
    float: left;
    padding-left: 20px;
    padding-bottom: 10px;
}
#ZMTengah, #ZMKanan {
    width: 280px;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;
}
#upper-footer {
    width: 850px;
    clear: both;
    line-height: 1.4em;
    letter-spacing: .0em;
    font-size: 80%;
    border-top: 1px solid #D60000;
    margin: 0 auto;
    padding: 10px 0 0;
}

Then find the code </ body> Place the following code right above it

<!--Start Footer-->
<div id='bottom'>
<b:section class='footer-wrapper' id='footer-wrapper' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='' type='Label'/>
</b:section>
<div id='footer'>
<b:section class='bottom section' id='ZMKiri' preferred='yes' style='float:left;'>
</b:section>
<b:section class='bottom section' id='ZMTengah' preferred='yes' style='float:center;'>
</b:section>
<b:section class='bottom section' id='ZMKanan' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='upper-footer'>
<div style='margin: 0px; padding-top: 2px; padding-left: 15px; float: right;'>
<a href='http://zackmaru.blogspot.com/' title='Zackmaru™'><img alt='Zackmaru™' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKJuyw8g43FdcuojvEDDxffeSLvqYd8VGOt3OIDBoCamNWzFI2BqNFKUF9C-om4DAu2j2CxBBFed-9-d0aIWZ811GIRKEVFAS7wxmbsUJyvRSWa4xnvxIJDxZRt8fHYQt1tDQh6Wl7w3w/s1600/bloggerindo.gif'/></a>
</div><div style='float: left; padding-top: 0px;'><font color='#ffffff'>&#169; 2012 </font><font color='#ffffff'>
<a href='http://zackmaru.blogspot.com/' title='Description'><font color='#ffffff'>Zackmaru&#8482;</font></a></font><font color='#ffffff'> Powered By <a href='http://www.blogger.com'>Blogger</a> - All Rights Reserved - Best View Using <a href='http://nightly.mozilla.org/' rel='nofollow' target='_blank'>Nightly Build</a>.</font></div></div>
<div style='clear:both;'></div>
</div>

<!--End Footer-->

• then SAVE

hahaha ƪ(‾ε‾“)ʃ  it easy to sob.
Good luck!

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Cadangan Doang. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Cadangan Doang dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Gojek Ewako pada tanggal 28/09/12