JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<ol id="posts-diperbaharui"></ol>

CSS

li.perbaharui {
    list-style: none;
    height:60px;
    overflow:hidden;
    font-size:80%
}
.thumbnail-perbaharui {
    float:left;
    margin:5px 10px 0 5px
}
.tanggalnya {
    display:block;
    font-size:90%
}

JavaScript

function updatedPosts(a) {
    if (document.getElementById("posts-diperbaharui")) {
        var e = a.feed.entry,
            title, img, link, date, content = "",
            ct = document.getElementById("posts-diperbaharui");
        for (var i = 0; i < 7; i++) {
            for (var j = 0; j < 7; j++) {
                if (e[i].link[j].rel == "alternate") {
                    link = e[i].link[j].href;
                    break
                }
            }
            var title = e[i].title.$t,
                pd = e[i].published.$t.substring(0, 10),
                date = pd.replace(/-/g, "/");
            if ("media$thumbnail" in e[i]) {
                img = e[i].media$thumbnail.url
            } else {
                img = "http://isi_dengan-alamat-alamat-gambar-untuk-posting-yang-tidak-memiliki-gambar"
            }
            content += '<li class="perbaharui"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="thumbnail-perbaharui" alt="thumb" height="40px" width="40px"/>';
            content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tanggalnya"> diposkan pada ' + date + "</span></li>";
        }
        ct.innerHTML = content
    }
}

function getScript(url) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url;
    document.body.appendChild(s)
}
getScript("http://defandaky.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");