Hey! Friends`are you know how to add 3 coulmns to your blogger footer section..many websites and blogs has three column footer. footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design. there are only 6 steps to do this..this footer hack is specially for blogs that have different widths and styles.ok..try this very easy tutorial.. i hope you like this blogger hack..thankyou..
1.Log in to your Dashboard--> Desing- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this
4.Replace the line <b:section class='footer' id='footer'/> of above code with below code
5.Now find the </b:skin> tag in your template
6.Immediately before above line, add the below lines of code
7.Now Save Templates,Your Are done
1.Log in to your Dashboard--> Desing- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this
<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
4.Replace the line <b:section class='footer' id='footer'/> of above code with below code
<div id='footer-column-container'> <div id='footer2' style='width: 30%; 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: 40%; 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: 30%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> <p> <hr align='center' color='#5d5d54' width='90%'/></p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'> <b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section> </div> <div style='clear:both;'/> </div>
5.Now find the </b:skin> tag in your template
6.Immediately before above line, add the below lines of code
#footer-column-container { clear:both; } .footer-column { padding: 10px; }
7.Now Save Templates,Your Are done
No comments:
Post a Comment