Did you know that your site's footer is as powerful as your header? Free accounts? No problem, this is for all. On my latest tutorials, I am already using my footer for our JavaScript codes. That's one of the best tricks I ever discovered and shared here in our site. With this simple trick, you will be given additional knowledge to enhance your designing skills.
Traditionally, footer is a place for you to show your compact menus, your "About Us" link, copyrights, and some social sharing widgets. However, there are unseen uses of your footer which makes it as important as your header. Whether you're a PRO or FREE account, this trick will always be applicable.
Aside from basic elements, you can insert the following on your footer:
- Jquery Plug ins and libraries
- JavaScript codes
- Modernizr
While your styles (CSS), should stay on the header. To get the picture, look at our tutorial "Multi-item Slider", see how was the code distributed.
So why should we insert the codes on our footer? Here are few thoughts I gathered from stackoverflow:
The reason you do it at the bottom of the page is because if you put it at the top of your page then the rendering of your page will wait for these files before it renders. This is why a lot of people put JavaScript at the bottom of the page as it allows the entire page to be rendered then the JavaScript is loaded.
There's very rarely any reason you'd want to put the JavaScript at the top of the page, and unless you have an explicit reason you want the JavaScript loaded in before the main page then put it at the bottom. Most optimization guides suggest putting it at the bottom for this reason. – fyjham
Because of the fact that browsers have to pause displaying content of a page when it's parsing a Javascript file, the recommendation is to load the Javascript at the bottom of the page to speed up displaying a page's content. This works best if your website can be rendered without any Javascript executing to modify the page because the page will be available for user interaction even if a script hangs for longer than expected. – Agent_9191
I place all CSS in the HEAD to avoid excessive screen paintings and flashes of style.
I place most JavaScript file requests at the bottom of the page so that the page can render quickly (HTML/CSS loading will block until script tags above them have been loaded and processed). Any code that needs to be executed after the library files have loaded are executed onDOMReady, which is all code except for library initialization. –James van Dyke
Footer Code Box Locations
Note that we will not use your footer literally, rather your footer code boxes. Literal footers are those for PRO and higher accounts that is not included on Free. The "Footer Code Boxes" are those built in to every site whatever account you have. Just continue reading to locate where it is.
There are two ways to insert footer codes on your site. First is when you plan to make the effect on a single page only. Simply go to Pages Tab > choose your page title on the right > click Advance Settings > paste the code on the footer box.
Secondly, you want the code to affect your site as a whole. Just go to Settings Tab > Click SEO > scroll down and paste the code on the footer box.
I will always provide the appropriate footer code for each tutorial, just copy it and paste to any of your footer boxes. If it works on our live demo, then it should work with your site.
CONCLUSION
Some parts of Weebly is being overlooked, yet I believe that our template can be as powerful as WordPress, we only need to find ways to utilize what we already have. With keen observation and pure research, we can achieve every transformation we want. Here in My Weebly Tricks, I’ll share every information you should know, but I leave it for you to understand.
This trick is made possible using the "10 Capsulated Tips that can Change the Way you Edit your Weebly Site".
0 comments:
Have any question? Feel Free To Post Below: