Blogger: Uncaught ReferenceError $ is not defined

Question

I am following the tutorial here: http://tympanus.net/codrops/2013/04/30/text-opening-sequence-with-css-animations/

I'm trying to add this to a Blogger XML template. The script doesn't work, I keep getting an error in my Chrome Console saying it's not defined, but as far as I can tell it is. Here is what I'm using:

<div class="intro-container">   
    <div class="os-phrases" id="os-phrases">
        <h2>Hello...</h2>
        <h2>I'm Draven Xarcell Vestatt</h2>
        <h2>I Provide</h2>
        <h2>Organzied Creative Services</h2>
        <h2>Through</h2>
        <h2>Xarcell Studios</h2>
    </div>
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering(); 
    });
</script>

My jQuery call is at the end of the document:

<!-- Let's add jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

and the javascript file lettering.js is included within my XML template file(meaning no external js). I have tried linking directly to the file in the tutorial webpage, but gives the same results.

BTW, I have the script working in a blank html document, but it doesn't work in a Blogger template. I even got it working in jsFiddle just fine: http://jsfiddle.net/BULLr/

Answer 1

jQuery should be included before it is used - so it should be added before your script