JSFiddle - React, Tailwind, and code Playground

by w4hyou

HTML

<div id="list-recent-Post"></div>
<script type="text/javascript">
    var setelan_lanjutan = {
        feedsUri: [{
            name: "Posting JQuery",
            url: "http://info-kmu.blogspot.com/",
            tag: "Tunarungu"
        }],

    };
</script>

CSS

.list-recent-Post {
    margin:5px;
    padding:0;
    width:300px;
}
.list-recent-Post ul, .list-recent-Post li {
    margin:0;
    padding:0;
    list-style:none
}
.list-recent-Post li {
    padding:0.3em;
    border-bottom:1px solid #999
}
.list-recent-Post .main-title {
    padding:2px
}
.list-recent-Post .title a {
    font-weight:bold;
    font-size:100%;
    text-decoration:none
}
.list-recent-Post .title a:hover {
    text-decoration:underline
}
.list-recent-Post img, .list-recent-Post .fake-img {
    border:none;
    background-color:#333;
    margin:0 1em 0 0;
    padding:0;
    float:left
}
.list-recent-Post .summary {
    font-size:95%;
    overflow:hidden
}

JavaScript

var setelan_defaults  = {
    feedsUri: [{
        name: "Posting JQuery",
        url: "http://info-kmu.blogspot.com/",
        tag: "ABK"
    }],
    numPost: 4,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    newTabLink: false,
    containerId: "list-recent-Post",
    listClass: "list-recent-Post",
    current: 0,
    onLoadFeed: function (a) {},
    onLoadComplete: function () {},
    loadFeed: function (c) {
        var d = document.getElementsByTagName("head")[0],
            a = document.getElementById(this.containerId),
            b = document.createElement("script");
        b.type = "text/javascript";
        b.src = this.feedsUri[c].url + "/feeds/posts/summary" + (this.feedsUri[c].tag ? "/-/" + this.feedsUri[c].tag : "") + "?alt=json-in-script&max-results=" + this.numPost + "&callback=listEntries";
        d.appendChild(b)
    }
};
for (var i in setelan_defaults ) {
    setelan_defaults [i] = (typeof (setelan_lanjutan[i]) !== undefined && typeof (setelan_lanjutan[i]) !== "undefined") ? setelan_lanjutan[i] : setelan_defaults [i]
}

function listEntries(q) {
    var p = q.feed.entry,
        c = setelan_defaults ,
        h = document.getElementById(c.containerId),
        a = document.createElement("div"),
        d = "<ul>",
        l = c.feedsUri.length,
        n, k, m, g;
    for (var f = 0; f < c.numPost; f++) {
        if (f == p.length) {
            break
        }
        n = (c.titleLength !== "auto") ? p[f].title.$t.substring(0, c.titleLength) + (c.titleLength < p[f].title.$t.length ? "&hellip;" : "") : p[f].title.$t;
        m = ("summary" in p[f]) ? p[f].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
        m = (c.summaryLength < m.length) ? m.substring(0, c.summaryLength) + "&hellip;" : m;
        g = ("media$thumbnail" in p[f]) ? '<img src="' + p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//, "/s" + c.thumbSize + "-c/") + '" style="width:' + c.thumbSize + "px;height:" +...