Mempercantik Komentar Blogger di Halaman Stastis - OTODIDAK27

Mempercantik Komentar Blogger di Halaman Stastis

Membuat Komentar Cantik di Halaman Stastis
Langsung aja ya gan.
Pertama-tama silahkan copy paste kode di bawah ini dihalaman stastis kalian.
<ul class="komentar-baru-ensikology"></ul>

Kemudian tambahkan CSS nya.
.komentar-baru-ensikology {
  background: #eee;
  box-sizing: border-box;
  padding: 30px;
  margin: 0;
  position: relative;
}
.komentar-baru-ensikology:before {
  content: "";
  position: absolute;
  width: 2px;
  background: #dbdbdb;
  left: 50%;
  top: 30px;
  height: calc(100% - 30px);
}
.komentar-baru-ensikology__item {
  list-style: none;
  position: relative;
  margin-bottom: 20px;
}
.komentar-baru-ensikology__item.right {
  padding-left: calc(50% + 45px);
  right: 0;
}
.komentar-baru-ensikology__item.left {
  padding-right: calc(50% + 45px);
  left: 0;
}
.komentar-baru-ensikology__item.left .komentar-baru-ensikology__icon {
  left: auto;
  right: -70px;
  background-color: #34a853;
}
.komentar-baru-ensikology__item.left .komentar-baru-ensikology__content:before {
  left: auto;
  right: -15px;
  border-color: transparent transparent transparent #fff;
}
.komentar-baru-ensikology__item.left .komentar-baru-ensikology__content:after {
  left: auto;
  right: -15px;
  border-color: transparent transparent transparent #ddd;
}
.komentar-baru-ensikology__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;
}
.komentar-baru-ensikology__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);
}
.komentar-baru-ensikology__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;
}
.komentar-baru-ensikology__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;
}
.komentar-baru-ensikology__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;
}
.komentar-baru-ensikology__header {
  clear: both;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.komentar-baru-ensikology__avatar {
  float: left;
  width: 35px;
  height: 35px;
  display: block;
  margin-right: 10px;
}
.komentar-baru-ensikology__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.komentar-baru-ensikology__link, .komentar-baru-ensikology__timelink {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #404040;
}
.komentar-baru-ensikology__timelink {
  line-height: 21px;
  color: #ababab;
  font-weight: 400;
  font-size: 12px;
}
.komentar-baru-ensikology__date:after {
  content: ",";
}
.komentar-baru-ensikology__year:after {
  content: "-";
  display: inline-block;
  padding: 0 3px 0 5px;
}
.komentar-baru-ensikology__body {
  line-height: 20px;
  clear: both;
  color: #8a8a8a;
}

Jika sudah tambahkan juga kode JS dibwah ini.
var _maxresults = 30,
    _avatarSize = 40;
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

$.ajax({
    url: 'https://ensikology.blogspot.com/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="komentar-baru-ensikology__item title">Last ${_maxresults} comments</li>
` : ""}
<li class="komentar-baru-ensikology__item ${i%2===0 ? "right" : "left"}">
                <div class="komentar-baru-ensikology__content">
                  <div class="komentar-baru-ensikology__icon">
                    <i class="fa ${i%2===0 ? "fa-comments-o" : "fa-comments"}"></i>
                  </div>
<div class="komentar-baru-ensikology__header">
                    <div class="komentar-baru-ensikology__avatar">
                      <img src="${_avatar}"/>
                    </div>
<div class="komentar-baru-ensikology__meta">
                      <div class="komentar-baru-ensikology__user">
                        <a class="komentar-baru-ensikology__link" href="${_useruri}" title="${_user}">${_user}</a>
                      </div>
<div class="komentar-baru-ensikology__time">
                        <a class="komentar-baru-ensikology__timelink" href="${_link}">
                          <span class="komentar-baru-ensikology__month">${_month}</span>
                          <span class="komentar-baru-ensikology__date">${_date}</span>
                          <span class="komentar-baru-ensikology__year">${_year}</span>
                          <span class="komentar-baru-ensikology__hour">${_hour}</span>
                        </a>
                      </div>
</div>
</div>
<div class="komentar-baru-ensikology__body">
${_content}</div>
</div>
</li>
`;
            $(".komentar-baru-ensikology").append(_item);
        }
    }
})

Catatan : Silahkan di rubah apa yang perlu dirubah, seperti css untuk membuatnya responsif, dan nilai variabel _maxresult silahkan disesuaikan.

Untuk demo nya bisa dilihat dibawah ini.


Okedeh cukup sekian dari ensikology, wassalam.

0 Response to "Mempercantik Komentar Blogger di Halaman Stastis"

Post a Comment

Beri apresiasi terhadap thread ini Gan!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel