Add 3 Coloumn Footer in Your Blog

Today Tutorial blog and blogger hack.  I still have no mood about continue my project, some problem still holding in my head. But, writing in blog is get my self relax  a bit. Ok, just ignore my problem and we will have a schedule today for post a new content. how about make some Blogger hack in our template? Like adding 3 coloumn in footer?i see, you all agree about it. let’s begin this hack.

• Log in your blogger account
• Move to Layout and Choose Edit HTML
• Back up your blog first, and click on expand widget template
• Copy this code and paste before the tag </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

• save the template
• Now, find this code

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

 

• Change the red code with code below

<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>

 

• Save and done

Now you can check your Layout, if you follow the instruction you will see three footer have added. Congratulate

That’s blogger hack today, please enjoy this blog and i will give more tutorial blog and blogger hack for you.

Enter your email To get Update this blog for free:

Delivered by FeedBurner

Related Posts by Categories