Issues adding github gist to my blog(using Google blogger)

Question

I'm trying to add a gist to my blog to see how it works and use it to share some code related blogs going forward.

I've followed the steps mentioned form this blog, but I'm not able to get it to work. I don't know what I'm missing, any pointers on what I could be missing would be really appreciated.

My HTML Editor of blog related code looks like this:-

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
Loading ....</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> </div>

Thanks.

UPDATE (including, changing the code above)

I found one thing confusing for a while, why should I actually paste a div tag in the "Compose" Section of the Blog, it's afterall HTML code, so I moved it to the HTML editor part of the Blog. What was confusing to me initially was when it was mentioned in the blog:-

Now to include any gist template just add the following anywhere in your blog post.

But anyways, now, I only get "Loading" .., The error still persists..

Answer 1

Here's the code that did it correctly for me. I had to ensure that within the div I copy the code that comes as part of 'Embed the gist' when you actually see one's real gist(say for e.g., this gist) on Github.

Also, one more mistake I made was in my code, the JS was not completely outside the post(it was actually inside the last div if you observer closely(my bad)). Anyways, All's well that end's well :). So here's the code that did the trick for me -

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>

In case you want to see how I was able to embed the gist in my blog, you can have a look
at the stackoverflow question that I <a href="http://stackoverflow.com/questions/18788724/issues-adding-github-gist-to-my-blogusing-google-blogger/21355714#21355714">posted here</a> on the same when I had initially faced issues to get this to work for me.

Credits to the original <a href="http://blog.moski.me/2012/01/gist-with-bloggers-dynamic-views.html">blogger's post</a>. 
</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

Here's the actual blog link which uses the above code.

Cheers.. :)

Answer 2

A simpler solution (since October 2014): www.gistfy.com:

Gistfy is an easy way to create embeddable code snippets from your GitHub and Bitbucket repositories or your GitHub Gist.

For example:

<script type='text/javascript' src='http://www.gistfy.com/github/gist/10666727'></script>
                                                                         ^
                                                                  (id of a GitHub Gist)