JSFiddle - React, Tailwind, and code Playground

by w4hyou

HTML

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

CSS

#recent-posts li {
         list-style: none;
         height:100%;
         overflow:hidden;
         margin:5px 0
     }
     .imgupdate {
         float:left;
         margin:5px 10px 0 5px;
         border:1px solid #ccc
     }
     .recent-posts a {
         text-decoration:none;
     }
     .recent-posts a:hover {
         color:orange;
         text-decoration:underline;
     }
     time {
         display:block
     }

JavaScript

var homePage = "http://info-kmu.blogspot.com/", // Your blog homepage
       numPosts = 5; //Jumlah Posting Yang Ingin ditampilkan

   // Recent Post widget for Blogger
   // Author: yOu w4hyOu
   // https://plus.google.com/106933633716411881896/about

   function recentPosts(a) {
       if (document.getElementById("recent-posts")) {
           var e = a.feed.entry,
               title, link, img, content = "",
               ct = document.getElementById("recent-posts");
           for (var i = 0; i < numPosts; i++) {
               for (var j = 0; j < numPosts; 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).split("-"),
                   o = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
               if ("media$thumbnail" in e[i]) {
                   img = e[i].media$thumbnail.url
               } else {
                   img = "http://2.bp.blogspot.com/-cNG7GEX_-Tg/USgW8xDqsEI/AAAAAAAAFK4/162ZVB_JFfg/s40/no+image+%25281%2529.jpg"
               }
               content += '<li class="recent-posts"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong>';
               content += '<time datetime=' + pd.join("-") + '>' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + '</time></li>'
           }
           ct.innerHTML = content
       }
   }
   var you_script = document.createElement('script');
   you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
  ...