jquery - JSFiddle は機能しますが、Blogger サイトでは機能しません: jQuery cookie

Question

このフィドルでわかるように: http://jsfiddle.net/yjxzQ/11/完全に動作します。[カートに追加] リンクをクリックすると、[カートに既に入っています] div が表示され、[更新] (または再度実行) をクリックすると、[カートに入っています] div が表示されたままになります。

テスト投稿へのリンクは次のとおりです。 http://sitetestexample.blogspot.com/p/add-to-cart.html ご覧のとおり、jquery はまったく機能していません。ロード時に「すでにカートに入っています」divを隠しているわけではありません。

投稿のコードは、フィドルとまったく同じです。

<a href="#" id="akready-in-cart">Already in Cart</a>
<a href="#" id="add-to-cart">Add to Cart</a>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<script type="text/javascript"> 
$(function(){
$('#akready-in-cart').hide();
$('#add-to-cart').click(function(){

$('#add-to-cart').hide();
$('#akready-in-cart').show();
$.cookie('akready-in-cart', true);
});

$('#akready-in-cart').click(function(){
$('#add-to-cart').show();
$('#akready-in-cart').hide();

$.cookie('akready-in-cart', false);
});
if($.cookie('akready-in-cart') == 'true'){
$('#add-to-cart').click();
} else {
$('#akready-in-cart').click();
}
</script>


<style type='text/css'>
#akready-in-cart{
margin:5px 0 0 0;
padding:3px 5px;
background:red;
color:#fff;
font-weight: bold;
font-size: 24px;
display:inline-block;
text-decoration:none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

何か案は？