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(http://3.bp.blogspot.com/-nmHwH4mynUQ/TYlNGIGj0LI/AAAAAAAAC84/yOTxHsekNbA/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(http://3.bp.blogspot.com/-22xLwnnoI5Q/TYlNFgLFGEI/AAAAAAAAC8w/fTCBx8-xvZY/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.

0 comments:

Are you confused or just want to tell us you visited? Feel free to comment

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Thinking of spamming here?:
Please do not spam Spam comments will be deleted immediately upon our review. So why waste your time?

Regards,
Enoch

Kindly use this button below to get this my article on your computer:

Print Friendly and PDF

You can also read this Related Posts



Best Blogger Tips

Post a Comment

Join me on Facebook Follow me on Twitter Follow me on Digg Follow on BlogCatalog Follow me on MySpace Subscribe to RSS Email me

Blog Archives

Google+

Google+

Followers