How to add jQuery in Google Blogger without modifying the template?

I have written a script (http://jsfiddle.net/vishnukanwar/yqH5B/) using jQuery which shows a social-like_button div on page load. While this div is shown everything else is blurred.

My trouble is, this jQuery script is working fine on my desktop (locally and on jsfiddle) but once I post it to Blogger, it doesn’t work.

I feel Blogger does not load jQuery synchronously (even it is asked for) that is why it shows ‘jQuery is undefined’ error.

  var jq = document.createElement('script');
  //jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
  jq.src = "https://code.jquery.com/jquery-1.10.1.min.js";
  jq.onload = jq.onreadystatechange = loadPopupBox;  // for function def check [link][2]
  document.getElementsByTagName('head')[0].appendChild(jq);

Can anyone tell me how can I add jQuery dynamically and synchronously in Google Blogger without modifying my Blog template?

Answer

…and here is the code which works absolutely fine for Blogger.com. I added this at www.tcft.in

<script>
    function MyScript ()
    {
        if (typeof jQuery === "undefined") {
            alert ("jQuery is undefined");
        } else {
            alert ($("head").text());
        }
    }

    function LoadJQuery ( onload )
    {
        if (typeof jQuery !== "undefined") {
            if ( typeof onload !== "undefined" ) script.onload = onload;
        } else {
            var script = document.createElement('script');
            if ( typeof onload !== "undefined" ) script.onload = onload;
            script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
            script.async = false;
            document.head.appendChild(script);
        }
    }

    LoadJQuery( function () { MyScript () });

</script>

Advertisement

Answer