August 24, 2014

Author's Pick #5 - The Power of your Weebly Footer Code Box

Posted by Domz at 8/24/2014

Weebly Footer


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.



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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

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

Home | | Privacy Policy | Top