Recently, I made a tutorial "Free Footer for Free Weebly Accounts", now here comes the level 2 for that. Another interesting footer trick from Tutorialzine called "Slide-Out Footer" because it only shows fully when you scroll last to your site's bottom. This is another alternative footer for Free Users in Weebly since it only requires styling. Time to make your Weebly even better.
1. Before we start, I would like you to prepare your site's logo if you have one. Resize it to 48x37 using online resizer . Once done, upload it to your Weebly site by going to Weebly > Design > Edit CSS/HTML > Add new files > choose that resized logo and save your template. If you don't have a logo then skip this step but the output won't be as better as it should.
2. You need to hide your default footer first, to do that please go to "Free Footer" and read its step 1 and apply it to your template. After hiding your default footer, you can now proceed to step 3 in this tutorial.
3. Download the following CSS file simply by right clicking on it and choose "save link as".
slideoutfooter.css
Now upload it to your template. Uploading instruction can be seen at step 1 in this tutorial.
4. Time to edit your site's <head>, since it’s a footer, go to Weebly > Settings > SEO > Header Code, and from the box given, place the following code:
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet">
<link href="http://demo.tutorialzine.com/2013/08/slideout-footer-css/assets/css/style.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/slideoutfooter.css">
<style>
footer a.logo:before{
content: '';
display: inline-block;
background: url('http://myweeblytricksdemo.weebly.com/files/theme/mylogomwt.png') no-repeat ;
width: 50px;
height: 37px;
vertical-align: text-top;
margin-left:-10%;
}
</style>
<link href="http://demo.tutorialzine.com/2013/08/slideout-footer-css/assets/css/style.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/slideoutfooter.css">
<style>
footer a.logo:before{
content: '';
display: inline-block;
background: url('http://myweeblytricksdemo.weebly.com/files/theme/mylogomwt.png') no-repeat ;
width: 50px;
height: 37px;
vertical-align: text-top;
margin-left:-10%;
}
</style>
Replace my site which is in yellow color with your own site address. Change the red highlighted text with your logo's link location. If you upload it in your template, simply change the bolded text. Stay on your screen.
5. On top of the header code is the footer code box. Now insert the following HTML code in the footer code box:
<footer>
<ul>
<li>
<p class="home">Home</p>
<a class="logo" href="http://www.myweeblytricks.com">MY WEEBLY TRICKS<i>© 2014</i></a>
</li>
<li>
<p class="services">Services</p>
<ul>
<li><a href="#">Site Editing</a></li>
<li><a href="#">Online Tutorial</a></li>
<li><a href="#">Mobile development</a></li>
<li><a href="#">Web & Print Design</a></li>
</ul>
</li>
<li>
<p class="reachus">Reach us</p>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li>555-123456789</li>
</ul>
</li>
<li>
<p class="clients">Clients</p>
<ul>
<li><a href="#">Login Area</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
</ul>
</footer>
<ul>
<li>
<p class="home">Home</p>
<a class="logo" href="http://www.myweeblytricks.com">MY WEEBLY TRICKS<i>© 2014</i></a>
</li>
<li>
<p class="services">Services</p>
<ul>
<li><a href="#">Site Editing</a></li>
<li><a href="#">Online Tutorial</a></li>
<li><a href="#">Mobile development</a></li>
<li><a href="#">Web & Print Design</a></li>
</ul>
</li>
<li>
<p class="reachus">Reach us</p>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li>555-123456789</li>
</ul>
</li>
<li>
<p class="clients">Clients</p>
<ul>
<li><a href="#">Login Area</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
</ul>
</footer>
Try to base on the live demo to see what are you going to change specially the titles and listed items. Don't forget to replace the "#" with the links you are pointing to. Save and publish your site!
If you have problems installing it, just comment below or contact me and I can insert it to your template for free.
Hi,
ReplyDeleteThanks alot for your trick. But I just want to add a logo + URL to another website.
I try another code more simple than yours.
First, I set the footer-content visisbility:hidden ( to hide weebly logo)
Then I add image# footer-logo
img#footer-logo{
width: 600px;
padding: 1em 0 0;
border-top: 3px solid #000000;
}
in the Edit CSS design.
Then I get out, add the code in the footer:
a href="http://website"
img src="http://yourwebsite.weebly.com/files/theme/logo.png" id="footer-logo"
I learn from your tutorials about coding and editing :) Thanks alot.
And your comment box with the Prove that you are human from blogger... It doesn't work in Chrome. I try to roll out to fill in the form but impossible.
ReplyDeleteIs that the main reason you receive less comment for your awesome tricks?
One thing I learned from direct published comments... my site will be spammed with promotional comments. There are countless spam comments I deleted earlier. People can say thanks in my FB or may use the forum if it is sincere though.
ReplyDeleteThanks anyway!:)