Blogger JSON Feed With Jquery Ajax

This is a demo of blogger json feed with jquery ajax from threelas

by Salem Yaslim

HTML

<style text-type="CSS">
img.label_thumb {float:right;padding:2px;background:#fff;border:1px solid #000;width:78px;height:78px;margin-right:10px;margin-top:5px;margin-bottom:5px; }
img.label_thumb:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.8 }
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
    document.write('<ul class="post_ul">');
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var cnt = json.feed.entry[i].content.$t;
				
        var f = document.createElement("div");
        f.innerHTML = cnt;
				
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl;
        try {
            thumburl = entry.media$thumbnail.url;
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl = d;
            } else thumburl = '';
        }
        document.write('<li class="post_li"> <a class="li_a" href="' + posturl + '" title="' + posttitle + '"><img class="li_thumb" src="' + thumburl + '"/></a><div class="li_ttl"> ' + posttitle + '</div> <div class="li_content">' + f.querySelector(".download").outerHTML +'  </div>');
        if (i != (numposts - 1))
            document.write('');
    }
    document.write('</ul>');
}
//]]>

var numposts =...

CSS

ul.post_ul {
    float: right;
    width: 100%;
    padding: 0;
}

li.post_li {
    float: right;
    width: 28%;
    margin: 1%;
}

a.li_a {
    height: 140px;
    width: 100%;
}

img.li_thumb {
    width: 100%;
    height: 100%;
}

.li_ttl {
    width: 100%;
    float: right;
    height: 40px;
    background: #2795ee;
    color: #333;
    text-align: center;
}

.li_content {
    float: right;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}