As You All Know That blogger is allow only Three Column Footer Section so i am coming with another hack To Creat four column footer section so you can add many widgets
Steps You Need to Add 4 Column Section at the Bottom of the Blogger
Step 1. Login to your Blogger Dashboard
Step 2. Go to Layout >> Edit HTML , do not check the “expand widget templates” box. This will simplifies the process
Step 3. Back up your existing blogger template (Click on ‘Download Full Template’ to Back up)
Step 4. Now search these line of codes or similar ( footer-wrap, footer, footer-end etc… )
<div id=’footer-wrapper’> <b:section class=’footer’ id=’footer’/> </div> |
Step 5. Replace section code in red with below code
<div id='footer-column-container'> <div id='footer1' style='width: 225px; float: left; margin:0; '> <b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'> <b:widget id='Text1' locked='false' title='About B-G' type='Text'/> </b:section> </div> <div id='footer2' style='width: 225px; float: left; margin:0; '> <b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'> <b:widget id='Text4' locked='false' title='About Author' type='Text'/> </b:section> </div> <div id='footer3' style='width: 225px; float: right; margin:0; '> <b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'> <b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/> </b:section> </div> <div id='footer4' style='width: 225px; float: right; margin:0; '> <b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'> <b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/> </b:section> </div> <div style='clear:both;'/> </div> |
Step 6. Now you need to add CSS for these section, add below CSS code right above ]]></b:skin>
#footer-column-container { border: .3px dotted #cccccc;} .footer-column { margin: 0 10px 0 10px; padding:5px; color: #666666; line-height: 1.5em; font-size:12px;} .footer-column h2 { padding-bottom:.15em; text-align:center; font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif"; color:#333333; line-height:1em; letter-spacing:.1em; border-bottom: 1px solid #cccccc;} .footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;} .footer-column ul li { background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat; margin:0 0 0; padding-left: 16px; padding-bottom: 0.5em; line-height:1.2em;} .footer-column .widget {margin:0 0 .5em; padding:0 0 1em;} |
Step 7. Preview and Save your template. Now you will have four column at footer section
KEEP VISITING
thanks alot that info
you are most welcomed
Thank a lot brother…You are Genius!!
Thank you buddy , I m extremely Happy that you found it useful , I m not genius but their a some sort of smartness :P
Thanks a lot this is exactly what I was looking for. One question, how do I change the background color of the footer??
Thanks again!
Just edit the CSS of #footer-column-container to get the desired results
aright thank you for your help :D
No Problem if you need anything else just contact me