February 13, 2014

Weebly Tricks #19 - Free Footer for Free Accounts

Posted by Domz at 2/13/2014

Free Weebly Footer for Free Account


Free accounts in Weebly has many limitations including the absence of editable footer, that's why many has been discourage of using it. This problem is now a myth once I taught you on how to insert your own footer using a free account. Although this was accidentally discovered by me, the result is quiet amazing and I myself can’t believe it’s possible and realistic.




1. Since you can’t edit the default footer, we have no option but to remove it. First go Weebly > Design > Edit HTML/CSS > main-style.css. Now scroll down and look for the "footer" section, just below it you should see something like this:

/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
border-top: 2px dotted #8A0808;
border-bottom: 2px dotted #8A0808;
background: #ffffff no-repeat center ;
text-align:center;
        padding:  0;
visibility:hidden;
display:none;
}

By default, the yellow part should not be there, so add it to remove your footer completely. Adjust the padding to 0 as shown above the yellow mark. Save your work and proceed to the next step.

2. So where do we edit our footer now? Just go to settings > SEO > you will see a box for "footer code", try to insert any of my example below. Please take note, this are just examples, you can always create your own.

Simple Footer
<p style='text-align:center;padding-left:20px;'>&#169; 2014. All Rights Reserved  | <a href='http://myweeblytricksdemo.weebly.com'>Home</a> | <a href='http://www.myweeblytricks.com/p/about-me.html' rel='author'>About Me</a> | <a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Privacy Policy</a></p>

Footer with Iframe
<p style='float:left; padding-left:270px;'> <a href='http://myweeblytricksdemo.weebly.com'>Demo Home</a> </br><a href='http://myweeblytricksdemo.weebly.com'>Tutorial Home</a> </br><a href='http://myweeblytricksdemo.weebly.com'>RSS Feed</a> </br><a href='http://myweeblytricksdemo.weebly.com'>Twitter</a> </br><a href='http://myweeblytricksdemo.weebly.com'>Google +</a> </br><a href='http://myweeblytricksdemo.weebly.com'>Linkedin</a> </br><a href='http://www.myweeblytricks.com/p/about-me.html' rel='author'>About Me</a> </br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Privacy Policy</a></br>&#169; 2014. All Rights Reserved</p>

<p style='float: left; padding-left:50px;'>  <a href='http://myweeblytricksdemo.weebly.com'>Site Modification</a> </br><a href='http://www.myweeblytricks.com/p/about-me.html' rel='author'>Navigation</a> </br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Image Effects</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Image Mouseover</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Image Slideshow</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Text Animations</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Scrollers</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Widgets</a></br><a href='http://www.myweeblytricks.com/p/privacy-policy.html'>Time and Dates</a></br></p>


<p style='float:left;padding-left:50px;'>  <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyweeblytricks&amp;width=291&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=232781983560908" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:291px; height:290px;" allowtransparency="true"></iframe></p>


The preview of those codes can be seen in the demo. If you want to use them, just replace the variables that needed to be. This is just an alternative footer if you haven't a Pro Account yet. Though imperfect, you can actually add anything inside it. Any problem with this, please comment below.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

17 comments:

  1. Very informative post.. Thanks....

    ReplyDelete
  2. Now Weebly is updated they footer, now when I insert that line, it's fine but have a big space between the body and the footer. How can I fix this?

    ReplyDelete
    Replies
    1. Additionally Chi,

      I think your site is testcodecb, you installed a fake toolbar which causes more space between your body and the footer. I can fix that, you may post this problem at our forum. If that's not your site, then still open a topic at the forum.

      Delete
    2. Hello, what's the fake toolbar. Where's it?
      I'll post this in your forum, also this is my website.

      Delete
    3. The answer can be located at the forum.

      Delete
  3. Hi Chi,

    If ever they updated their footer, its only the style. elements stay the same. we can always adjust those css and other html on the template. Just look at my demo page. It works perfectly, just remember to modify the padding and margin.

    ReplyDelete
  4. Thanks it worked great! I was wondering, do you know if you can get in trouble for hidding the weebly footer?

    ReplyDelete
  5. Thanks for the tips, I was able to create a footer with this, but is there a way to change the color of the text? Right now the text is grey and the links are white.

    ReplyDelete
    Replies
    1. Of course, simple name your footer with DIV class and create style out of it. For more info, post request at the forum.

      Delete
  6. Hi, thank you for this sharing this great idea. I followed the instruction here for my website(www.voipfreedomidd.com) to create "Multiple Column Weebly Footer"-- All is doing well but in the footer, it covers the window of footer area that is not matched with other content of a page. I could not explain well. Could you please take a look of my website and advice me to fix the thing?
    Will be waiting. Thank you.

    ReplyDelete
  7. That was easy! Now, is there a way to insert a background image?

    ReplyDelete
    Replies
    1. Sure there is, look for topics under "Site Modification".

      Delete
  8. i was search for this tip many times. So nice job, thank you a lot!

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top