You would have seen many new modified blogger templates with additional 3 widgets at the bottom (footer) of the blog, and they are very useful for bloggers, as you can place widgets like Recent posts, Recent comments, Top posts and Top commentators etc in these widgets.
It is very important to add these widgets in a blog, as when readers finish reading the post, they may immediately leave the blog if no other interesting article is found. Moreover these widgets help new visitors to understand the blog’s main content.
So if these widgets are not present in your blog, then follow these steps to add them yourself :
First log in to Blogger.com
Go to Layout -> Click on Edit HTML tab
Now search (CTRL+F) for these code line:
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>
REPLACE the entire red line in the above code, with this new 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;’/>
<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>
Now PREVIEW the template, and if no errors are displayed, then carry on:
Find this code:
]]></b:skin>
Then immediately BEFORE / ABOVE it, paste these lines:
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
Save the template, go to “Page Elements”, and add content to the three new widgets !
For Adding this Hack Below Header Use Just Find For :
<div id=’Header-wrapper’>
<b:section class=’header’ id=’header’/>
</div>
And Similarly Like How to add Footer Add It Header
Adrian says
Hey thanks for the reply; however, I nee th code for a 3 columns on the top of my page; below the hear.
I have generated a code, though I consier it messy and need a cleaner version. Perhaps you could help me here.
Ritesh Sanap says
ya i can help you just follow tutorial Instead Of Footer Put It In Header.
ramandeep says
hey nice trick…but widget is looking so bad…can style it ……also do u have tutorial for stylish categories in bottom of ur blog …this is the best thing in ur blog
Ritesh Sanap says
ramandeep ,
sorry for keep you waiting but at last your request is been completed you can get the tutorial here : Thesis Style footer for blogger