How to add 3 column footer in blogger

Top Post Ad

You can also do this by going to your blogger dashboard> design> edit template> layout and choose your footer. But if you follow this pattern, it will not give you an extra single column footer to add your copyright just like the one in this blog. This tutorial will help make this possible by splitting the columns into 3 and one single column below. There are so many codes online, but not all work in all blogger templates. Some blogs may ask you to search for this code in your template <b:section class='footer' id='footer'/> or <div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div> .Not all templates have the above codes but you're about to see a simpler method.

Follow This Steps:

1.)Login to blogger dashboard> Design> Edit Template. 2.)Now back up your template by downloading the template in case anything goes wrong. 3.)Press Ctrl+F and search for ]]></b:skin> 4.)Above the searched code, paste the below code: /* FOOTER */
#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}

Must Read

• How To Add Random Auto Related Post Links In Blogger Posts
• How To Start A Blog That Makes Money Using Blogspot (Blogger)
• How To Block Ads, Popups And Apps On Your Android Smartphone
• How To Hide Apps On Samsung And Xiaomi Android Devices
• Best Cloud-based Control Panel To Manage Servers And Websites

#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/AVvXsEiqbta8wcp0rjaahZ5UouUEXHVXJ9usu-sXCW1jhyZc3MbE8lgesBB-AjEkC30t4yjKKcET8kBzYlS9jT1-9JaT60NUnwmM-FlWwN5cy-wJZERAoKxOMrEydT6mdnlw4S0S20zS7DpRqCBI/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/AVvXsEiNAq1ap-eYWY2HiOGBmyGvEkFYPVNZ6hMMiBIxL0JGV0eoyJp8l6r3P5eRVTTxYL29Hgk7ORBhGlMw__nq_JFM-3Mmb649_BL4LC22JeEH160ONFSoMf_Dc6LAadUS_iosdmQPxVkwekIH/s1600/widget-list.png) left 10px no-repeat;border-bottom:1px solid #DEDEDE;} 5.)Now search for one of any of the these codes in your template: <footer>, <div class='footer'>, <div id='footer'> or <div id="wrapper"> 6.)Have you found any of the codes? Now, paste this code below any of the above searched codes: <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> OK. You can now save your template. After saving it, go back to design and page elements, scroll down and see your new 3 column footer. It will look like this

Star adding your items to your footer. Enjoy!