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.
Add Three New Widgets At The Bottom Of Blogger/Blogspot Blog
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 !

Leave a Reply

61 Comments on "Add Three New Widgets At The Bottom Of Blogger/Blogspot Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
motts
Guest

thank i will try it post whether it is working or not..

View Comment
Ivaylo Spasov
Guest

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?

View Comment
Divya Sai
Guest

Those lines are required for styling the boxes, it won’t be appearing in the blog, so you must have them in the code.

View Comment
Ivaylo Spasov
Guest

10x. That was very helpful!

View Comment
Anonymous
Guest

:)) cool

View Comment
By H@risP@p
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Mohammad Mustafa Ahmedzai
Guest

yes Dsai Haris pop is correct, your second code is appearing as text at the bottom of homepage. Plz let me know where should I paste it

View Comment
Mohammad Mustafa Ahmedzai
Guest

by the way the widget is working without adding the second code, but Dsai the widget background is transparent, I need it with a blue background. Plz see my blog Click here

Moreover your first code forms a widget automatically with title ” TEXT” and nothing in it.

View Comment
Divya Sai
Guest

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)

View Comment
Mohammad Mustafa Ahmedzai
Guest
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… Read more »
Divya Sai
Guest

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?

View Comment
Divya Sai
Guest

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

View Comment
Mohammad Mustafa Ahmedzai
Guest
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:skinThese 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… Read more »
Mohammad Mustafa Ahmedzai
Guest

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.

View Comment
Mohammad Mustafa Ahmedzai
Guest

I am waiting for your answer to my query…………………

View Comment
Divya Sai
Guest

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>

View Comment
Divya Sai
Guest

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 !

View Comment
Mohammad Mustafa Ahmedzai
Guest

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?

View Comment
the anger monger
Guest

wow…you can put links in your comment form? how?

View Comment
wpDiscuz