Recent Comments in Blogger - rasgane

Recent Comments adalah komentar terbaru yang ditinggalkan oleh pengunjung atau pembaca pada sebuah website atau blog.

Recent Comments biasanya ditampilkan pada halaman blog atau widget di sisi halaman blog. Fitur Recent Comments ini memungkinkan pengunjung atau pembaca untuk melihat komentar terbaru yang ditinggalkan oleh orang lain pada artikel atau postingan tertentu di blog.

Fitur ini juga dapat membantu meningkatkan interaksi antara pembaca dengan pemilik blog, serta memungkinkan pembaca untuk melihat diskusi atau tanggapan terbaru terhadap suatu topik atau artikel di blog.

• Results
• Code

Demo Bisa Di lihat di bagian Sidebar kiri Blog ini.

1. Buka Dashboard Blogger Anda dan pilih menu Layout/Tata Letak.

2. Selanjutnya klik Tambahkan Gadget/Add a Gadget dan pilih gadget HTML/JavaScript

3. Salin kode dibawah ini.

<div class="recent_comments">
  <div class="BoxLoadingKu">
    <span class="LoadingKu"></span>
  </div>
</div>

4. Dan salin kode dibawah ini di atas ]]></b:skin>.

.recent_comment{min-height: 58px;max-height:300px;overflow:auto}
.recent_comments::-webkit-scrollbar{width:7px;height:7px}
.recent_comments::-webkit-scrollbar-thumb{background: #7380ec;border-radius: 5px}
.recent_comments::-webkit-scrollbar-track{background:rgba(0,0,0,0.1);border-radius: 5px}
.recent_comments .item_comment{padding:5px;margin-bottom:4px}
.recent_comments .item_comment .postJD{display:flex;gap:5px;align-items:center}
.recent_comments .item_comment .postJD .avatar_Recent_Commments{width:40px;height:40px;border-radius:100%;overflow:hidden}
.recent_comments .item_comment .postJD .avatar_Recent_Commments img{width:100%;height:100%;object-fit:cover}
.recent_comments .item_comment .postJD a{font-size:12px;background:#363949;display:block;color:#fff;padding:3px 5px;border-radius:5px;font-weight:600}
.recent_comments .item_comment .postJD .date_commnet{font-size:12px}
.recent_comments .item_comment p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin-top: 0.8rem}
.recent_comments .item_comment p input.button {margin: 0}
.recent_comments .item_comment .spoiler-content > img {margin-top: 1rem}

Kalian juga Bisa menambahkan style css tiap komen kode dibawah.

.recent_comments .item_comment.c-Id_Profil{background:rgb(115 128 236 / 16%)}
/* Anonymous */
.recent_comment .item_comment.c-Anonymous {background: #ebe8e8}

5. Yang terakhir letakan javascript dibawah </body>.

<script>//<![CDATA[
  const rc = document.querySelector(".recent_comments");
  let no_avatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1jWnblw-rIzKtVkOFZq2r5yMYbK7xRRUnRg5sbqSlz7mcHm_QgRzyLD3Ynv2ULwr7cQHYfrOIfc7xyDPOX_oOJrHJf-CS7e50BfbXXRe9tege4aJmjGaMmAtZrN4AksuTC1aJgkFKncltUCZMyLWTNe8U6TzKFyAKDHy0YzaxzGFYKkR8kcHErPetA/s50/Profil%20Avatar%20Comments.png",
      jumlah_komen = "20",
      summaryLength = 300,
      html = "";
  const recent_comment = t => {
      t.forEach(t => {
          t.title.$t;
          let rc_content = t.content.$t ? t.content.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, summaryLength) : "",
              rc_author_name = t.author[0].name.$t,
              rc_author_avatar = "https://img1.blogblog.com/img/blank.gif" !== t.author[0].gd$image.src && "https://img1.blogblog.com/img/b16-rounded.gif" !== t.author[0].gd$image.src ? t.author[0].gd$image.src : no_avatar,
              rc_id_comment = (null != t.author[0].uri ? t.author[0].uri.$t : "https://www.blogger.com/profile/Anonymous").split("profile/")[1],
              rc_link = (t.published.$t, t.link.find(t => "alternate" == t.rel).href),
              m = t.published.$t.split("T")[0],
              rc_date = m.split("-")[2],
              rc_month = m.split("-")[1],
              rc_year = m.split("-")[0],
              a = new Date(t.published.$t).toTimeString().split(" ")[0];
          a.split(":")[0], a.split(":")[1], 
          html += `
          <div class="item_comment c-${rc_id_comment}">
            <div class="postJD">
              <div class="avatar_Recent_Commments">
                <img src="${rc_author_avatar}" alt="Comment ${rc_author_name}">
              </div>
              <a href="${rc_link}">${rc_author_name}</a> 
              <div class="date_commnet">${rc_date}/${rc_month}/${rc_year}</div>
            </div>
            <p>${rc_content}</p></div>`, 
          rc && (rc.innerHTML = html)
      })
  },
  recentcomment = t => {
      recent_comment(t.feed.entry)
  },
  script = document.createElement("script");
  script.setAttribute("src", `/feeds/comments/default?&alt=json-in-script&callback=recentcomment&max-results=${jumlah_komen}`), script.setAttribute("async", ""), document.body.appendChild(script);
//]]></script>

Info!
no_avatar = Url Gambar No avatar dan Anonymous.
jumlah_komen = Jumlah Komen yang muncul.
summaryLength = Jumlah kata Summary yang muncul.

Referensi : https://www.forum.projexcode.com/
https://www.youtube.com/@LiveBlogger
https://www.w3schools.com/jsref/dom_obj_script.asp
https://www.nicepng.com/ourpic/u2w7i1y3y3i1a9o0_account-user-profile-avatar-comments-free-image-user
https://www.petanikode.com/javascript-percabangan

V1.3 - 17 April 2023

• Add Custom Jumlah summary

V1.2 - 5 April 2023

• Add id Profil Comment
• Add Custom Jumlah Comment

V1.1 - 3 April 2023

• Add Profil Avatar Comment
• Add Custom Profil Avatar Comments (Anonim)
• Add Custom Profil Avatar Comments (No Profil)

V1 - 1 April 2023

• Add Name Comment
• Add Date Comment
• Add Summary/Content Comment