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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

62 comments

Write comments
January 17, 2009 9:30 PM delete

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

Reply
avatar
February 02, 2009 5:21 AM delete

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?

Reply
avatar
February 02, 2009 7:34 AM delete

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

Reply
avatar
February 25, 2009 2:09 PM delete

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

Reply
avatar
February 25, 2009 3:03 PM delete

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

Reply
avatar
March 14, 2009 6:28 PM delete

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

Reply
avatar
March 14, 2009 6:36 PM delete

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.

Reply
avatar
March 15, 2009 5:11 AM delete

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)

Reply
avatar
March 15, 2009 5:59 AM delete

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.

Reply
avatar
March 15, 2009 6:10 AM delete

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?

Reply
avatar
March 15, 2009 6:21 AM delete

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

Reply
avatar
March 15, 2009 10:20 AM delete

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

Reply
avatar
March 15, 2009 11:00 AM delete

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

I believe I am clear with my words.

Reply
avatar
March 17, 2009 5:17 PM delete

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

Reply
avatar
March 18, 2009 12:03 PM delete

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>

Reply
avatar
March 18, 2009 12:07 PM delete

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 !

Reply
avatar
March 18, 2009 4:12 PM delete This comment has been removed by the author.
avatar
March 18, 2009 4:13 PM delete

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?

Reply
avatar
May 07, 2009 2:46 AM delete

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

Reply
avatar
May 07, 2009 3:30 AM delete

links are allowed in all blogspot (blogger) blogs...try it in your own blog mam...

Reply
avatar
May 17, 2009 5:09 AM delete

I can't find the first code. What I should I do?

Reply
avatar
July 09, 2009 7:18 AM delete

Thanks! I needed this. I am going to add this Widgets.

Reply
avatar
September 12, 2009 3:17 AM delete

it's works, thanks, now plz tell me, i wanted to set the red background on heading of font. http://alisoft7.blogspot.com

and secondly plz tell me, how should i re-size the header width.

Reply
avatar
September 12, 2009 5:08 AM delete

Hello Ali,

Hello Ali, hope you have done the changes yourself...but kindly do not use the header image of BloggerStop!

Reply
avatar
September 25, 2009 4:08 PM delete

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.

Reply
avatar
September 26, 2009 2:35 AM delete

@Justme
Yeah div tags has been used in the hack, but as you said all of them are properly closed, may be some other tag in your template is creating problem.

Reply
avatar
September 26, 2009 11:04 AM delete

Thank you for the response. I will look a little closer at all of the code.

Reply
avatar
November 01, 2009 7:32 PM delete

Hi good day!

I could not find red text you mentioned above. What I have is this code:

Reply
avatar
November 20, 2009 5:52 AM delete

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.

Reply
avatar
November 22, 2009 8:13 AM delete

any body could help with my above question?
it's been 2 day, but yet not heard any comment about this problem..

Reply
avatar
November 22, 2009 10:07 AM delete

I think I'll have to look at your template yusuf...but I need some time (busy for at least a week)

Reply
avatar
November 23, 2009 11:15 PM delete

it's ok Dsai..
i already figure it out,but i hv a new problem :)
the footer now being separated from the main template :(
please visit my blog if you hv some free time
Earn Bucks Online

Reply
avatar
December 07, 2009 11:28 PM delete

Wow it worked,thanks :)) :-*

Reply
avatar
December 12, 2009 12:12 PM delete

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.

Reply
avatar
January 09, 2010 11:17 AM delete

Thank you for the codes, anyway im looking for another widget that show people online something like arrghh i cant explain something like her blog at the bottom http://www.rochellesychua.com

if ever you know drop me a comment at http://www.aiesalas.com

plssssss Thanks

Reply
avatar
January 09, 2010 11:45 AM delete

Hey there,

Go to this page:
http://whos.amung.us/showcase/

And select the one you want (map/simple widget etc.), you will be redirected to a new page, from where you just have to copy-paste the code, no registration required. Just copy the code and paste it in to a html/javascript widget of your blog.

Reply
avatar
January 17, 2010 4:22 PM delete

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

Reply
avatar
January 18, 2010 8:00 AM delete

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.

Reply
avatar
January 20, 2010 8:47 PM delete

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

Reply
avatar
January 21, 2010 12:48 PM delete

Thanks Starr for your kind words...I'll try my best to continue posting similar helpful posts on this blog. Thanks again for such an encouraging comment :)

Reply
avatar
January 29, 2010 4:18 AM delete

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

Reply
avatar
January 30, 2010 8:40 AM delete

Yeah it will be better, if you can send me the picture to my email id bloggerstop.net [at] gmail [dot] com
I'll give you further code/instructions once you send that picture to me.

Reply
avatar
January 31, 2010 6:09 PM delete

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!

Reply
avatar
February 01, 2010 12:08 AM delete

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

Reply
avatar
February 01, 2010 2:38 AM delete

Will do Sai. I'm in here almost daily while I'm getting set up - you've got some great tips and info here :) Much to read and learn!

Reply
avatar
February 06, 2010 12:45 AM delete

I Want To Know Is There Any Way i can add this Widgets at the above instead of Bottom .

See This Image
http://i48.tinypic.com/15dizq.jpg

Or

Can i have a sidebars like your is ,In the upper 1 Big and after that 2 small.

Reply
avatar
February 06, 2010 3:48 AM delete

See This Image Sorry For Last Image Link
http://i48.tinypic.com/15d1izq.jpg

Reply
avatar
February 07, 2010 9:27 AM delete

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.

Reply
avatar
February 08, 2010 11:01 AM delete

OK then can u plz tell any way to do my sidebar like your's
1 BIG AND 2 small.

Reply
avatar
March 30, 2010 2:08 AM delete

hi sai, i am using simpress template

(http://btemplates.com/2008/03/11/simpress/)

i want to add these 3 in the white bottom portion of template than the black footer. please suggest.

Regards

Reply
avatar
July 19, 2010 8:05 AM delete

I Want To Know Is There Any Way i can add this Widgets at the right @ left instead of Bottom?

see my website http://pic.izyan.com

thanx Divya

Reply
avatar
August 26, 2010 9:17 PM delete

thank you so much for the code, it was very usefull and so easy to install :)

Reply
avatar
February 20, 2011 7:14 AM delete

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

Reply
avatar
April 05, 2011 6:16 PM delete

perfect!!! this is what I've been looking for, thank you so much!

Reply
avatar
December 09, 2011 4:03 AM delete

thankyou veri much bloggerstop.net :) ......www.er-jay.blogspot.com

Reply
avatar
Anonymous
September 11, 2012 1:59 AM delete

hy i didnt find the first code in my blog. Any other ways to add widgets at the bottom of the blog?

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon