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'>REPLACE the entire red line in the above code, with this new code:
<b:section class='footer' id='footer'/></div>
<div id='footer-column-container'>Now PREVIEW the template, and if no errors are displayed, then carry on:
<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>
Find this code:
]]></b:skin>
Then immediately BEFORE / ABOVE it, paste these lines:
#footer-column-container {Save the template, go to "Page Elements", and add content to the three new widgets !
clear:both;
}
.footer-column {
padding: 10px;
}
61 comments
Write commentsthank i will try it post whether it is working or not..
ReplySo 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?
ReplyThose lines are required for styling the boxes, it won't be appearing in the blog, so you must have them in the code.
Reply10x. That was very helpful!
Reply:)) cool
ReplyHi! 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."
ReplySo 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!)
Thanks Haridpap,
ReplyAlthough 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
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
Replyby 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
ReplyMoreover your first code forms a widget automatically with title " TEXT" and nothing in it.
Thanks Mohd for reminding me about this widget...
ReplyI 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)
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.
ReplyBy 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.
yes mohd,
Replythe 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?
For a background blue color do this:
ReplyReplace 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;'>
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
ReplyThese 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
Dsai, I have adjusted the style coding of those widgets. But there some erros in it, which are,
Reply1. 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.
I am waiting for your answer to my query.....................
ReplyHi Mohd,
ReplyMake 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>
Actually write titles like this:
Reply<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 !
THKS DSAI,
ReplyThis 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?
wow...you can put links in your comment form? how?
Replylinks are allowed in all blogspot (blogger) blogs...try it in your own blog mam...
ReplyI'll try this out. Thanks! :)
ReplyI can't find the first code. What I should I do?
ReplyThanks! I needed this. I am going to add this Widgets.
Replyit's works, thanks, now plz tell me, i wanted to set the red background on heading of font. http://alisoft7.blogspot.com
Replyand secondly plz tell me, how should i re-size the header width.
Hello Ali,
ReplyHello Ali, hope you have done the changes yourself...but kindly do not use the header image of BloggerStop!
:)) thank you
ReplyI cannot get the code to work. I get this error message.
ReplyYour 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.
@Justme
ReplyYeah 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.
Thank you for the response. I will look a little closer at all of the code.
ReplyHi good day!
ReplyI could not find red text you mentioned above. What I have is this code:
hi again Dsai..
Replyi'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.
any body could help with my above question?
Replyit's been 2 day, but yet not heard any comment about this problem..
I think I'll have to look at your template yusuf...but I need some time (busy for at least a week)
Replyit's ok Dsai..
Replyi 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
Wow it worked,thanks :)) :-*
ReplyHey Yusuf,
ReplyYou 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.
hurrah! this is so helpful. thanks!
ReplyHey there,
ReplyGo 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.
Hi,
ReplyI 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
Yes that is possible Hendon,
ReplyYou 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.
Thank you Sai,
ReplyI 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
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 :)
ReplyHi again Sai,
ReplyI 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
Yeah it will be better, if you can send me the picture to my email id bloggerstop.net [at] gmail [dot] com
ReplyI'll give you further code/instructions once you send that picture to me.
Sai,
ReplyI 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!
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 :)
ReplyRegards
Sai
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!
ReplyI Want To Know Is There Any Way i can add this Widgets at the above instead of Bottom .
ReplySee 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.
See This Image Sorry For Last Image Link
Replyhttp://i48.tinypic.com/15d1izq.jpg
I haven't tried it myself in any of the blogs, but I think that is possible.
ReplyAlthough 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.
OK then can u plz tell any way to do my sidebar like your's
Reply1 BIG AND 2 small.
hi sai, i am using simpress template
Reply(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
I Want To Know Is There Any Way i can add this Widgets at the right @ left instead of Bottom?
Replysee my website http://pic.izyan.com
thanx Divya
thank you so much for the code, it was very usefull and so easy to install :)
Replyi 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.
ReplyFYI:
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...
perfect!!! this is what I've been looking for, thank you so much!
Replythank you :)
Replythankyou veri much bloggerstop.net :) ......www.er-jay.blogspot.com
Replyhy i didnt find the first code in my blog. Any other ways to add widgets at the bottom of the blog?
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon