Add Three New Widgets At The Bottom Of Blogger/Blogspot Blog

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 !

61 thoughts on “Add Three New Widgets At The Bottom Of Blogger/Blogspot Blog

  1. So i like this, but the final code #footer-column-container { clear:both; } .footer-column { padding: 10px; } appeared at the end of the page as text. How could I make it disappear without affecting the widgets?

  2. Hi! I think your post isn't tottaly right! I had the same problem as "Ivaylo Spasov" –> "the final code #footer-column-container { clear:both;}.footer-column {padding: 10px;} appeared at the of the page as text."
    So I searched to google and I found a post that sayw that at the last step you have to paste the code before "<"/b:skin">"! Check it, because that worked for me! Thanks! (Your posts are great!)

  3. Thanks Haridpap,
    Although I have tested this hack on 2/3 blogs, but of course there chances that something may be left by me….so thanks for telling that !

    Anyways I'll replace </body> with </b:skin>

    Regards
    Sai

  4. Thanks Mohd for reminding me about this widget…
    I have corrected thatb:skin tag,

    and yes by default type of widget has been selected as “Text”, see this in the code:
    <b:widget id='Text2' locked='false' title='' type='Text'/>
    You can change it as per your requirement.

    The second code is for styling the widgets, so copy the css code of your other sidebar widgets and paste it in to this (second)code to give a similar appearance to these 3 new widgets
    (even the background code has to be added in the second code only)

  5. dsai I would appreciate if you could extend your current post and explain in detail on how to copy the css code of our sidebar widgets and paste it into this code.

    By the way pasting the second code after b:skin isn’t looking a good idea for me since we use this ]]] b:skin for a lot of purposes. dont u think that pasting the code between ]]] and b:skin is risky

    Dsai plz help me with that feedburner form. Its not working on that multi tab widget. Plz test it yourself and see whats wrong.

    I am thankful to your quick-reply quality.

  6. yes mohd,
    the position is before
    ]]></b:skin>

    and writing it in detail will take some time….

    and regarding the feedburner form, have you tried in any other multi-tabbed widget?

  7. For a background blue color do this:

    Replace all the three of these

    <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

    <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>

    <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

    with these:

    <div id='footer2' style='width: 30%; background: #0084CE; float: left; margin:0; text-align: left;'>

    <div id='footer2' style='width: 40%; background: #0084CE; float: left; margin:0; text-align: left;'>

    <div id='footer2' style='width: 30%; background: #0084CE; float: left; margin:0; text-align: left;'>

  8. Dsai thks alot. The widget is better than before but still not pro. Dsai you have seen my blog many times. Can you plz prepare a good looking style code [that second code] for these three widgets so that I may paste it directly before ]]b:skin
    These widgets are looking really ugly. I want the text to be white and title area to be like yours and lines below links to be dotted.
    Plz help

    Yes I did copy-paste feedburner code into another widget and is working perfectly alright but not in that multi tab widget.

    Sorry for bothering you again and again

    Regards
    Here is my blog

  9. Dsai, I have adjusted the style coding of those widgets. But there some erros in it, which are,
    1. The third widget is a bit to the right
    2. Some text is visible whilst other invisible
    3. How to give a blue background to the widget title area just like those of my other widget blue title area.

    In short how to style these widgets according to my template requirement 😀

    I believe I am clear with my words.

  10. Hi Mohd,

    Make the width as 30% for all three of them in the code.

    Then, use these tricks to solve your issues,

    use background color as white (follow instructions as given in earlier comment)…

    Now for headings;

    DO NOT write anything in the TITLE blank of the HTML widget, leave it blank.

    No first line of the content box will be your TITLE, type the heading as popular posts etc.

    But type it like this:

    <div style="background:#0084CE;">TITLE HERE</div>

  11. Actually write titles like this:

    <div style="background:#0084CE;"><font color="white"><b>TITLE HERE</b></font></div>

    as you know, this will show bold, white text in blue BG…

    & sorry 4 replying late !

  12. THKS DSAI,

    This trick really worked however when I added that title code to my recent comment widget, it stopped displaying, it interrupted the comment feed code. But nevermind this trick proved helpful. At least I can now see the text.

    Dsai I wanted to confirm onething. Is it true that feed widgets [Recent comments, Recent Posts] provided by blogger takes greater load time compared to that by feed-burner?

  13. I cannot get the code to work. I get this error message.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "
    I don't see any unclosed elements.

  14. hi again Dsai..
    i'm trying to use this hack in my blog..but i can't find the code ..
    i only found this code that similar to that –> [div id='footer'].
    i've try many way but it didn't work out in my blog.so i guess i have 2 ask u Dsai..
    this is my blog Click Here

    Thx.

  15. Hey Yusuf,

    You have to apply some new style-code to this "new-footer"
    Here's how you have to do this:

    just before the tag </head>

    Add this code:

    <style type="text/css">
    #footer-column-container {
    background: #fff;
    color: red;
    }
    </style>

    You can use an image of ~920px width as background.

  16. Hi,

    I have six pictures together for my header and I am trying to put six more together down at the bottom of the page. Would you know the coding to do this? I tried to bring the six into the bottom but it condensed the size. I would like them both to be the same size. Is there a way that I can copy the Header coding and make changes to have that same layout also show up on the bottom? Any suggestions would be greatly appreciated!
    http://starrhendon.blogspot.com

  17. Yes that is possible Hendon,
    You can add the six images, using any image-editor (download and use paint.net if you don't have photoshop in your PC)

    And add a HTML/JavaScript widget in the bottom region of your blogs template, and put this image in to that widget. If it isn;t coming like the way you wanted, then feel free to comment here.

    PS: Use this tool to measure the dimentions of the image you are going to create, so as to match that of your header image.

  18. Thank you Sai,

    I will give that a try. Trying to get the top photos with Photoshop was a nightmare so I went with Photoscape, much easier program. I've been looking at your site a lot the last several days and I would like to tell you that I think what you are doing is absolutely wonderful. Thank you so much for sharing your knowledge with all of us who need some help. It is very much appreciated.

    Sincerely,
    Starr

  19. Hi again Sai,

    I set up the six pictures for the bottom of the blog in Photoscape again and have them saved in one of my Pictures files. The dimensions are the same as the top pictures. But for the life of me I can't figure out what to do to get them there.

    I don't know how to add a HTML/Java script widget in the template. I'm still a newbie at changing the template but I do understand making minor changes. Do I need to copy and change the header section and put it at the bottom? If that's the case, can you tell me where it is and what changes I need to make? If you don't mind helping and need to go into more detail than the space here allows I will send you my email address.

    Many thanks Sai,
    Starr

  20. Sai,

    I want to thank you so very much for your patience and assistance in helping me with the pictures for the bottom of the blog. It has turned out as well as I had hoped it would.

    Your are very kind to share your knowledge and tips, instead of keeping all the good stuff to yourself. And also, thank you for getting back to me so quickly!

  21. You are most welcome Starr and I'm really happy to help you with your blog. Feel free to comment anywhere in this blog or mail me whenever you need any help…happy blogging 🙂

    Regards
    Sai

  22. I haven't tried it myself in any of the blogs, but I think that is possible.
    Although according to the screenshot, it may look good, but once you add these widgets to your blog, it may spoil your blogs looks, because you have a continuation/connection between header and blog-main-body. And if you add any widget between your header and main wrapper, then it will spoil that connection.

  23. i want to add more 2 column before content and 2 column after content. is that possible with this code? because i do edit this code but i couldn't find that work.

    FYI:
    2 column @before content for 2 different advertisement (i use the table before but the advert didn't came out).

    2 column @after content for bookmark and related post.

    Please suggest me some…

Leave a Reply

Your email address will not be published. Required fields are marked *