How to Create Custom Footer with Links in Free Weebly website
July 19, 2011 Tags: css, custom footer, footer links, free, hide, html, SEO, weebly
Category: Headers & Footers, Tutorials 8 Comments 
You can create a custom footer with links for your free Weebly website. Pro Users have a different (easier) way of updating the footer message and links. Free users need to edit the CSS and html to add or remove or customize the footer. Seattle Homes is created from free weebly account for demonstration purposes for Real Estate Agents. If you look at its footer, there is no weebly message. Instead it has its own custom message with a link to this Weebly forums.
Custom footer with link for a free weebly website. You need to change the CSS and HTML files to do this. Pro Users do not need to do this.
To get this, you need to make two changes. One to the CSS and the other to the HTML file. Go to Design–>Edit HTML/CSS.
Edit HTML and CSS to change footer in free weebly website
Click on CSS. Locate the portion that says #footer. Add the line visibility:hidden; and change the marginsetting to 0 0 0 0.
Add Visibility Hidden to the #footer of CSS to hide the free weebly promotion footer.
Now add #custom-footer to your css with the following code. You can change the text size, font weight, text alignment etc to your taste.
#custom-footer {
float:left;
text-align:right;
width:960px;
margin:0px 0 0px 0;
font-size: 14px;
font-weight: bold;
}
Add custom footer for your free weebly site
The CSS part is done. Now Click on your HTML file and add the following near the footer section:
<div id="custom-footer">
Go to <a href="http://www.weeblyforums.com"> Weebly Forums </a>
for more details on using this demo
</div>
Add the links and text you like to be shown as your footer in the free weebly website.
You can add your own links in place of weeblyforums.com. If you would like your footer to be at the centre of the page, choose text-align: center; in the CSS. You can preview the changes in the the theme editor. Once your changes are complete, save the files and publish.
hey your comment box is html based its decoding my code …….change your comment box otherwise people are not able to send there code in comment box i am posting my html code again but with some erroe e.g ” © Privacy Policy | Legal Notices | Report Trademark Abuse </div>
<div class=”site_footer” style=”height:30px” align=”center”>
<a href=”http://www.tousfed.co.cc”> http://www.Tousfed.co.cc
By Towseef Ahmed
</div>
</div>
<div id=”footer-contents” style=”visibility:hidden”> %%WEEBLYFOOTER%% div>
Here you just put “<" befor every div make like <div and also "<" before "a herf" in the href and paste it in the weebly html code
Thanks Towseef. We almost have the comments for text only. For some places, the > isn't getting replaced well. Once we have it fixed, we all should be able to put html tags in comments.
Until then, if you like to post html tags, please use the forums. From the admin bar (which you will see at the top when you login) "Add new" ->Topic (or) "Add New"->Reply. You will then be able to use the visual editor to post html code.
Hi,
I followed the instructions and changed the footer and it worked great, but I'd like a little more complex footer, with cascading and parallel links, like this:
Travel Community
Rentals About Us
Hotels Advertise
Magazine Contact Us
Flights Facebook
Deals RSS
Do I set that up in CSS or HTML, and how do I do it? Thanks!
The CSS defines how the footer can be styled. The other option is to use the new {footer} tag to drag and drop content elements to footer areas. http://themedocs.weebly.com/html.html
Weebly has not yet released the new themes that make use of the {footer} tag. So, you will have to customize your theme to use {footer} tag.
Thanks! Any advise or links to tutorials on how to customize the footer tag for this style of footer? Much appreciated (I'm new to all of this).
Will put an article in a week or so. But I must caution, Weebly has not used the footer tags in their own themes. Makes me wonder if they are thinking of modifying them or adding some thing else to it.
There should be spaces between the links, like on this site:
http://motherjones.com/
hi i would like to change the color of the links that i have added in the weebly footer but not able to do that can u please help me out with it