Blogger JSON Feed API - Recent comments timeline style

Xin chào các bạn, đã lâu rồi không có viết lách gì do bận chuyện công việc. Có lẽ thời gian tới tôi sẽ dành nhiều thời gian chăm chút cho blogspot của chúng ta hơn. Trong bài viết này sẽ là một tips cũ quen thuộc chủ yếu tập trung vào style cho phần recent comments dạng timelime
Xem demo
demo
OK nếu bạn theo dõi chuyên mục json-feed của tôi rồi thì js không có gì mới. Phần timeline này có thể dùng trong page hoặc đặt bên sidebar đều được

Thư viện yêu cầu: jQuery, FontAwesome 4

Markup

<ul class="recent-comment"></ul>

CSS

.recent-comment {
  background: #eee;
  box-sizing: border-box;
  padding: 30px;
  margin: 0;
  position: relative;
}
.recent-comment:before {
  content: "";
  position: absolute;
  width: 2px;
  background: #dbdbdb;
  left: 50%;
  top: 30px;
  height: calc(100% - 30px);
}
.recent-comment__item {
  list-style: none;
  position: relative;
  margin-bottom: 20px;
}
.recent-comment__item.right {
  padding-left: calc(50% + 45px);
  right: 0;
}
.recent-comment__item.left {
  padding-right: calc(50% + 45px);
  left: 0;
}
.recent-comment__item.left .recent-comment__icon {
  left: auto;
  right: -70px;
  background-color: #34a853;
}
.recent-comment__item.left .recent-comment__content:before {
  left: auto;
  right: -15px;
  border-color: transparent transparent transparent #fff;
}
.recent-comment__item.left .recent-comment__content:after {
  left: auto;
  right: -15px;
  border-color: transparent transparent transparent #ddd;
}
.recent-comment__item.title {
  display: table;
  margin: 0 auto 30px;
  text-align: center;
  padding: 10px 20px;
  background: #eee;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #404040;
}
.recent-comment__content {
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding: 25px 30px 25px 28px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
}
.recent-comment__content:before {
  content: "";
  position: absolute;
  display: inline-block;
  border-style: solid;
  border-width: 7px 8px;
  border-color: transparent #fff transparent transparent;
  left: -15px;
  top: 38px;
  z-index: 2;
}
.recent-comment__content:after {
  content: "";
  position: absolute;
  display: inline-block;
  border-style: solid;
  border-width: 7px 8px;
  border-color: transparent #ddd transparent transparent;
  left: -16px;
  top: 38px;
  z-index: 1;
}
.recent-comment__icon {
  position: absolute;
  color: #fff;
  top: 20px;
  left: -67px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: 2px solid #fff;
  text-align: center;
  background-color: #ededed;
  border-radius: 50%;
  background-color: #4285f4;
  font-size: 20px;
}
.recent-comment__header {
  clear: both;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.recent-comment__avatar {
  float: left;
  width: 35px;
  height: 35px;
  display: block;
  margin-right: 10px;
}
.recent-comment__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.recent-comment__link, .recent-comment__timelink {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #404040;
}
.recent-comment__timelink {
  line-height: 21px;
  color: #ababab;
  font-weight: 400;
  font-size: 12px;
}
.recent-comment__date:after {
  content: ",";
}
.recent-comment__year:after {
  content: "-";
  display: inline-block;
  padding: 0 3px 0 5px;
}
.recent-comment__body {
  line-height: 20px;
  clear: both;
  color: #8a8a8a;
}

JS

var _maxresults = 30,
    _avatarSize = 40;
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

$.ajax({
    url: '/feeds/comments/summary',
    type: 'GET',
    dataType: 'jsonp',
    data: {
        'alt': 'json',
        'max-results': _maxresults,
    },
    success: function(json) {
        var _user, _useruri, _link, _time, _content, _avatar, _month, _date, _hour, _year, _item;
        for (var i = 0; i < json.feed.entry.length; i++) {
            for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                if (json.feed.entry[i].link[j].rel === 'alternate') {
                    _link = json.feed.entry[i].link[j].href;
                    break;
                }
            }
            _avatar = json.feed.entry[i].author[0].gd$image.src.replace(/\/s[0-9]+-?[A-Za-z]?\//i, `/s${_avatarSize * 2}-c/`);
            _useruri = json.feed.entry[i].author[0].uri.$t
            _user = json.feed.entry[i].author[0].name.$t;
            _content = json.feed.entry[i].summary.$t;
            _time = new Date(json.feed.entry[i].published.$t).toISOString();
            _month = months[parseInt(_time.split('-')[1], 10) - 1];
            _date = _time.substr(8, 2);
            _hour = _time.substr(11, 5);
            _year = _time.substr(0, 4);
            _item = ` 
              ${i==0 ? `<li class="recent-comment__item title">Last ${_maxresults} comments</li>` : ""}
              <li class="recent-comment__item ${i%2===0 ? "right" : "left"}">
                <div class="recent-comment__content">
                  <div class="recent-comment__icon">
                    <i class="fa ${i%2===0 ? "fa-comments-o" : "fa-comments"}"></i>
                  </div>
                  <div class="recent-comment__header">
                    <div class="recent-comment__avatar">
                      <img src="${_avatar}"/>
                    </div>
                    <div class="recent-comment__meta">
                      <div class="recent-comment__user">
                        <a class="recent-comment__link" href="${_useruri}" title="${_user}">${_user}</a>
                      </div>
                      <div class="recent-comment__time">
                        <a class="recent-comment__timelink" href="${_link}">
                          <span class="recent-comment__month">${_month}</span>
                          <span class="recent-comment__date">${_date}</span>
                          <span class="recent-comment__year">${_year}</span>
                          <span class="recent-comment__hour">${_hour}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="recent-comment__body">${_content}</div>
                </div>
              </li>
            `;
            $(".recent-comment").append(_item);
        }
    }
})

Lưu mẫu lại và kiểm tra kết quả.

Một vài lưu ý

• Bạn tự fix các class, id nếu bị xung đột
• Bạn tự custom css theo ý thích của mình (style, responsive)
• Điều chỉnh số nhận xét muốn hiển thị bằng việc thay đổi giá trị biến _maxresults

Chúc bạn thành công