Adding 3 Columns footer to your blog

Here is another useful tutorial which you can use to split the footer into 3 column and how you can add 3 column to your blog page. Many time I've been trying to get it but this time around I finally got one and very useful. Not all the templates provided by blogger has the feature of the two or three column footer but if you use the templates that has no footer, you can add your own footer column into it and make use of it on your blog.


In this Tutorial, I am going to show you the trick about how you can add and splitting footer into 3 columns. Hard when you heard it but very simply when you follow the tweak.

1. Sign in or login to blogger

2. Got to templates> Edit HTML

3. And follow the following steps.

4. Search for ]]></b:skin>

Immdiately above that copy and paste the follow code

<!-- Begin; Sample from http://www.skye-blog.blogspot.com, Edited by Enoch Amodu!-->
#footer-wrap{}
#footer{margin-top:10px}
#copyrights{color:#959595;text-align:center;padding:18px 0;background:#211C1C;text-shadow:0px 1px 0px #000;}
#copyrights a{color:#959595}
#copyrights a:hover{color:#fff;text-decoration:none}
#credits{color:#919191;text-align:center;font-size:11px;padding:10px 0;text-shadow:0px 1px 0px #000;}
#credits a{color:#919191;text-decoration:none}
#credits a:hover{text-decoration:none;color:#919191}
#footer-column-container {clear:both;padding:10px;background:#f4f4f4;color:#393838;}
#footer-column-container a{text-decoration:none;color: #393838;}
#footer-column-container a:hover{text-decoration:none;color:#C00302;}
#footer-column-container h2{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FiEAHyvWrx8NihPRYMme-UtaZvf6cnROLuttTlzqL6xuQxPZvGSnXRKA1kzhJog4RvGUJB_q-jDjpw5K9b4Z8KGSIKEuzXjEhHx8KUnSCaGlNq4FpoefSh-0j8mNpljiG1hlcnE1C-7M/s1600/widget-title-bg.png) left top repeat-x;font-size:15px;line-height:15px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:8px 0 8px 10px;text-transform:uppercase;text-shadow:0 1px 0 #710000;}
#footer-column-container ul{list-style-type:none;margin:0px;padding:0px;}
#footer-column-container ul li{padding:6px 0 6px 14px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBUeRKiwP6jtzar6IP_WWNHfbyqo9EjZtioshw28ZoO7TiJ80qmlCR_ESxbodOysuW89Wf6gpZh9TI7fmqvxZ43CmUx9fv6dnq3C2OIx75HSln9rlMbJpyZpH6wJz5asCv1SGRswpNkQ4/s1600/widget-list.png) left 10px no-repeat;border-bottom:1px solid #DEDEDE;}
<!-- End; Sample from http://www.skye-blog.blogspot.com, Edited by Enoch Amodu!-->

5. Now search for <div id='wrapper'> OR <div id='footer'> OR <div class='footer'> OR <footer> OR <div id='footer-wrapper'> then copy the codes below and paste it below code mentioned above.

<DIV class='span-24'>
<DIV id='footer-column-container'>
<DIV id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</DIV>
<DIV id='footer3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</DIV>
<DIV id='footer4' style='width: 32%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</DIV>
<DIV style='clear:both;'/>
</DIV>
</DIV>

6. Save the template and go to Layout and you will see your split footer.

Good luck.