January 7, 2009

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 !


57 comments:

motts said...

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

Ivaylo Spasov said...

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?

Divya Sai said...

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

Ivaylo Spasov said...

10x. That was very helpful!

Anonymous said...

:)) cool

By H@risP@p said...

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

Divya Sai said...

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

Mohammad Mustafa Ahmedzai said...

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

Mohammad Mustafa Ahmedzai said...

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.

Divya Sai said...

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)

Mohammad Mustafa Ahmedzai said...

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.

Divya Sai said...

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?

Divya Sai said...

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

Mohammad Mustafa Ahmedzai said...

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

Mohammad Mustafa Ahmedzai said...

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.

Mohammad Mustafa Ahmedzai said...

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

Divya Sai said...

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>

Divya Sai said...

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 !

Mohammad Mustafa Ahmedzai said...
This post has been removed by the author.
Mohammad Mustafa Ahmedzai said...

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?

the anger monger said...

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

Divya Sai said...

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

Perspective Shift Chris said...

I'll try this out. Thanks! :)

snam said...

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

Anamika said...

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

Ali Qayyum said...

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.

SAi @ BloggerStop.Net said...

Hello Ali,

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

Anonymous said...

:)) thank you

justme said...

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.

Divya Sai said...

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

justme said...

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

ASIGNATURA said...

Hi good day!

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

yusuf said...

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.

yusuf said...

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

Divya Sai said...

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

yusuf said...

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

Vikas said...

Wow it worked,thanks :)) :-*

Divya Sai said...

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.

visit lists2day.blogspot.com said...

hurrah! this is so helpful. thanks!

Miss AiE said...

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

Divya Sai said...

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.

Starr Hendon said...

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

Sai @ Blogger Help said...

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.

Starr Hendon said...

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

Divya Sai said...

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

Starr Hendon said...

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

Sai @ Blogger Widgets said...

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.

Starr Hendon said...

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!

Divya Sai said...

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

Starr Hendon said...

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!

Poras Gupta said...

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.

Poras Gupta said...

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

Divya Sai said...

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.

Poras said...

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

David.kansal said...

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

Pic.Izyan said...

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

Loulouchan said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]Seeking4Hosting[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy