<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: 100px;
}
div.desc {
padding: 15px;
text-align: center;
font-size:small;
}
</style>
<div id="result"></div>
<script>
$.ajax({
url: 'http://www.trikalfanetcell.com/feeds/posts/summary?alt=json-in-script&max-results=8',
type: 'get',
dataType: 'jsonp',
success: function(data) {
content = data.feed.entry;
if (content !== undefined) {
for (var i = 0; i < content.length; i++) {
title = content[i].title.$t;
for (var j = 0; j < content[i].link.length; j++) {
if (content[i].link[j].rel == "alternate") {
link = content[i].link[j].href;
break;
}
}
thumb = content[i].media$thumbnail.url;
summary = content[i].summary.$t;
$('#result').append('<div class="img"><a href="' + link + '"><img src="'+thumb+'" alt="'+title+'" width="300" height="200" title="'+title+'"></a><div class="desc">'+title.substr(0, 20)+'...');
}
} else {
$('#result').html('<span>No result!</span>');
}
},
error: function() {
$('#result').html('<strong>Error loading feed!</strong>');
}
});
</script>
Smoga bermanfaat....
ConversionConversion EmoticonEmoticon