Blogger Recent Post

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="widget-content">
<h2 class="widget-title">Recent Posts</h2>
<div id="recentposts"></div>
</div>

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;
}

JavaScript

var homeUrl = 'http://contoh-teks.blogspot.com/';
var numPosts = 4;

$(function() {
    $.ajax({
        url: homeUrl+'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 + '">' :
                        "";
              ...