Add a Styling Three Cloumn Footer to Your Blog

Posted by Faheem Mustafa



It is pretty common that you might have seen all the professional blogger templates would possess a three column footer where in, they add details about their site or an about me widget and lots more. I recommend you to add this feature in your blog to make it more professional. You may scroll down the page to have a look at the bottom of the page to have a look at this widget which contains Popular Posts, Useful Resources, Blog Archive and Recent Comments.
Hope, you got an idea about what a three column footer is.
Adding Three Column Footer

To add this stylish three column footer to your blog, just follow these simple steps. As we always ensure safety, the first step would be to back up your template. To do this, simply navigate to "Design->Edit HTML and make a backup of your template clicking on the "Download full template" link at the top of the page. Once the back up is over, follow these simple steps.




1. Search for the following text in your blogger template. To fasten your search, use "CTRL+F".
]]></b:skin>
2. Download the following text document : Three Column Footer One. Just paste the code in the document above the line mentioned in step 2.
3. Search your template for the following text.
</body>
4. Paste the following piece of code above it.
<div id='footer-wrapper'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
(Note: You may paste the above code in the place where you want the footer to appear. It is ideal to place this section before the credits section in your blog.)
5. Now, save your template and your ready with the footer section. Add any widget you want. Feel free to comment or contact me  for any assistance that you need to install this feature. I would be happy to help you!! See you soon in my next post!!!
Thanks to EAB

blog comments powered by Disqus
Related Posts with Thumbnails