Blogger Recent Post

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="widget-content">
<h2 class="widget-title">Recent Posts</h2>
<div id="recentposts"></div>
</div>
<!-- Recent 2 -->
<body>
  <div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div>
</body>

CSS

body{
    direction: ltr;
    color:#888;
    font:400 12px Fontawesome,'Roboto Slab',tahoma;
    line-height:25px;
}
ul,li{
    list-style:none;
}
a{
    text-decoration:none;
}

/* Recent Posts */

#recenposts{
    position:relative;
    overflow:hidden;
    padding: 0;
}
.recent-posts {
    overflow: hidden;
    position: relative;
    padding: 0;
}

.recent-posts > li  {
    overflow: hidden;
    position: relative;
    padding: 0 0 25px 0;
}

.recent-posts > li:last-child  {
    padding: 0;
}

.recent-posts > li .thumb {
    width: 60px;
    height: 55px;
    display: block;
    float: left;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 3px;
}

.recent-posts > li .thumb img {
    width: 100%;        
    height: 100%;
    display: block;
}

.recent-posts > li .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    display: inline;
}

.recent-posts > li .title a {
    color: #222;
}

.recent-posts > li .title a:hover {
    color: #D8A175;
}

.recent-posts > li .meta-date {
    display: block;
    font-size: 12px;
}

.recent-posts > li .meta-date:before {
    content: "\f017";
    margin-right:5px;
    float:left;
}

/* Recent 2 */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #eee;
  padding: 0;
  margin: 0;
}

a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.terbaru-container {
  background: #fff;
  width: 320px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

#cg-terbaru {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin: 5px 0;
  padding: 5px;
  height: 79px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 15px;
  width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 13px!important;
  font-weight: 700;
  margin: 0;
  color:...

JavaScript

var homeUrl = 'http://www.web-development.cf/';
var numPosts = 3;

$(function() {
    $.ajax({
        url: 'http://www.talaba.online/feeds/posts/summary?alt=json-in-script&max-results='+ numPosts +'',
        type: 'get',
        dataType: 'jsonp',
        success: function(data) {
            var link, title, item = '',
                content = data.feed.entry;
            if (content !== undefined) {
                item = "<ul class='recent-posts'>";
                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;
                        }
                    }
                    var date = content[i].published.$t;
                    var month = [1, 2, 3, 4, 5, 6, 7, 8, 9,
                        10, 11, 12
                    ];
                    var month2 = ["January", "February", "March",
                        "April", "May", "June",
                        "July", "August", "September",
                        "October", "November", "December"
                    ];
                    var day = date.split("-")[2].substring(
                        0, 2);
                    var m = date.split("-")[1];
                    var year = date.split("-")[0];
                    for (var u2 = 0; u2 < month.length; u2++) {
                        if (parseInt(m) == month[u2]) {
                            m = month2[u2];
                            break;
                        }
                    }
                    date = m + ' ' + day + ', ' + year;
                    var thumb = 'media$thumbnail' in
                        content[i] ? '<img src="' + content[
                            i].media$thumbnail.url + '">' :
                       ...