Mungkin kadang-kadang kita perlu widget untuk fitur tertentu, tetapi widget tidak tersedia.Blogger sudah menyediakan API untuk mengatasi hal ini, sehingga kita dapat membuat widget sendiri dengan membaca feed blog menggunakan JSON dan JavaScript.
Berikut adalah FEED API JSON:
|
|---|
Berikut adalah contoh implementasi kode di atas:
Misalkan saya butuh 5 posting terbaru oleh label tertentu, label saya ingin menampilkan adalah "trik javascript". Aku mengambil judul dan ringkasan posting.
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postSummary = json.feed.entry[i].summary.$t;
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://online-service-yangkutahu.blogspot.com/feeds/posts/summary/-/trik javascript?max-results=5&alt=json-in-script&callback=mycallback"></script>
Catatan:. Kita perlu memahami json.feed.entry bahwa [i] .summary $ t hanya tersedia jika kita ambil URL feed menggunakan
http://online-service-yangkutahu.blogspot.com/feeds/posts/summary
daripada menggunakan
http://online-service-yangkutahu.blogspot.com/feeds/posts/default.
http://online-service-yangkutahu.blogspot.com/feeds/posts/summary
daripada menggunakan
http://online-service-yangkutahu.blogspot.com/feeds/posts/default.
Sekarang bagaimana kita bisa membuat widget tanpa posting baru-baru disortir oleh label tertentu? Widget ini juga hanya menampilkan 90 karakter dalam ringkasan. Berikut ini adalah contohnya:
<script type="text/javascript">
function mycallback(json)
{
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++)
{
if (json.feed.entry[i].link[j].rel == 'alternate')
{
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, 90);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://online-service-yangkutahu.blogspot.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>
function mycallback(json)
{
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++)
{
if (json.feed.entry[i].link[j].rel == 'alternate')
{
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, 90);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://online-service-yangkutahu.blogspot.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>
Semoga bermanfaat....
ConversionConversion EmoticonEmoticon