Blogger JSON Feed With Jquery Ajax

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

by asfar mohamed

HTML

<select id="select" onchange="search(this)">
<option value="الكل">الكل</option>
<option value="فديوهات">الفديوهات</option>
<option value="كوميديا">كوميديا</option>
<option value="فنون">فنون</option>
</select>
<div id="view">
</div>
<script type='text/javascript'>
//<![CDATA[
var elementView = document.querySelector("#view");
var sel = document.querySelector("#select");
window.onload = function(){
	var newel;
  if(localStorage["seld"] == undefined)
  {
  	localStorage["seld"] = 0;
    newel = document.createElement("script");
    newel.id = "load";
    newel.src= "http://hakgkgdata.blogspot.com/feeds/posts/default/-/الكل?alt=json-in-script&callback=labelthumbs";
    sel.selectedIndex = localStorage["seld"];
    document.body.append(newel);
  }else{
    newel = document.createElement("script");
    newel.id = "load";
	  sel.selectedIndex = localStorage["seld"];
    newel.src= "http://hakgkgdata.blogspot.com/feeds/posts/default/-/"+sel.value+"?alt=json-in-script&callback=labelthumbs";
	 document.body.append(newel);
  }
  
};
function labelthumbs(json) {
		elementView.innerHTML = "";
    elementView.innerHTML += '<ul class="post_ul">';
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
       

        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 =...

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 }
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;
}