Share code recent comments siêu đẹp ai cũng mê

Hello! Lại là 1 chuyên mục share code tiếp đây. Lâu lắm mình chưa share code cho anh em. Chắc hẳn anh em đang hóng code tiếp theo mình share là gì đúng không? Trước hết mình hỏi thăm sức khỏe anh em đã, mấy nay mình thấy cúm A đang diễn biến tăng nhanh phức tạp nhất là trong trường học các trẻ nhỏ dễ bị lây, với cả thời tiết mấy ngày nay đêm sáng thì lạnh ngày nóng chiều tối lại lạnh, thời tiết thất thường ngày đêm chênh lệnh 10 độ vậy anh em nhớ giữ gìn sức khỏe kẻo ốm nha. Mình cũng đang hắt hơi sổ mũi do thời tiết thay đổi thất thường đây. À mình quên tiết lộ cho anh em, sắp tới mình sẽ thay lại màu áo cho blog chúng ta vì mình cảm thấy giao diện này không còn phù hợp với blog xu hướng hiện nay nữa. Hôm nay mình sẽ share code recent comment siêu đẹp ai cũng mê luôn. Tiếc gì mọi người không ủng hộ cho mình bằng cách chia sẻ bài viết, comment tương tác bài viết này. Sự ủng hộ của mọi người là niềm tin hy vọng cho mình tiếp tục trên con đường làm blog này.

Share code recent comments siêu đẹp ai cũng mê

code recent comments siêu đẹp ai cũng mê

Dưới đây là code recent comments siêu đẹp ai cũng mê, các bạn chỉ cần copy vào bất cứ đâu trong mã html trang web là được đừng có mà dán nhầm code html vào luôn code của css

Đây là code

<style></style>

<style>
ul.idbcomments{list-style:none;margin:0;padding:0}
.idbcomments li{margin:15px 0 0;padding:5px 0 5px 5px;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid #eee;border-radius:5px;background:var(--contentBs)}
.idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}
.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}
.idbcomments li a{font-weight:600;color:var(--bodyC))}
.idbcomments a{color:var(--bodyC)}
.idbcomments li span{margin-top:2px;color:var(--bodyC);display:block;font-size:12px;line-height:1.4}
.idbcomments .left{float:left;padding:10px 0 0 0}
.idbcomments .right{float:right;padding:10px 0 0 0}
.idbcomments .right a{display:inline-flex;align-items:center;gap:6px;color:var(--linkC);text-decoration:none;animation:blink 1.2s infinite}
.idbcomments .right a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:-2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
</style>

Đây là code giao diện lấy giao diện

<div id="rc"></div>
<div class="idbcomments clearfix" style="margin-top:10px">
  <div class="left">
    Hiện có <b><span id="total-comments">0</span></b> bình luận
  </div>
  <div class="right">
    <a href="/p/recent-comment.html" target="_blank" title="Xem bình luận">
      Xem thêm
      <svg class="line" viewbox="0 0 24 24" aria-hidden="true">
        <path d="M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699" stroke-miterlimit="10"></path>
        <path d="M3.5 12H20.33" stroke-miterlimit="10"></path>
      </svg>
    </a>
  </div>
</div>

Đây là code

<script></script>

<script>
/* ====== Config ====== */
var numComments   = typeof numComments   !== "undefined" ? numComments   : 5;   // số bình luận hiển thị
var showAvatar    = typeof showAvatar    !== "undefined" ? showAvatar    : true;
var avatarSize    = typeof avatarSize    !== "undefined" ? avatarSize    : 42;
var roundAvatar   = typeof roundAvatar   !== "undefined" ? roundAvatar   : true;
var characters    = typeof characters    !== "undefined" ? characters    : 40;  // cắt nội dung
var showMorelink  = typeof showMorelink  !== "undefined" ? showMorelink  : false;
var defaultAvatar = typeof defaultAvatar !== "undefined" ? defaultAvatar :
  "http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.png";
var moreLinktext  = typeof moreLinktext  !== "undefined" ? moreLinktext  : " More &#187;";
var hideCredits   = typeof hideCredits   !== "undefined" ? hideCredits   : false;

/* ====== Helpers ====== */
function stripHTML(html){ return (html||"").replace(/(<([^>]+)>)/gi,""); }
function clampText(t,limit){
  if(!t) return "";
  t=t.trim();
  if(t.length<=limit) return t;
  return t.substring(0,limit).replace(/\s+\S*$/,"")+"&#8230;";
}
function sizeAvatar(url){
  if(!url) return defaultAvatar;
  var u=url;
  if(u.indexOf("/s1600/")!==-1) return u.replace("/s1600/","/s"+avatarSize+"-c/");
  if(u.indexOf("/s220/")!==-1)  return u.replace("/s220/","/s"+avatarSize+"-c/");
  if(u.indexOf("/s512-c/")!==-1 && u.indexOf("http:")===-1) return "http:"+u.replace("/s512-c/","/s"+avatarSize+"-c/");
  if(u.indexOf("blogblog.com/img/b16-rounded.gif")!==-1) return "http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png";
  if(u.indexOf("blogblog.com/img/openid16-rounded.gif")!==-1) return "http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png";
  if(u.indexOf("blogblog.com/img/blank.gif")!==-1){
    if(defaultAvatar.indexOf("gravatar.com")!==-1) return defaultAvatar+"&s="+avatarSize;
    return defaultAvatar;
  }
  return u;
}

/* ====== Render recent comments ====== */
function idbcomments(feed){
  try{
    var entries = (feed && feed.feed && feed.feed.entry) ? feed.feed.entry : [];
    var max = Math.min(numComments, entries.length);
    var html = '<ul class="idbcomments">';
    for(var t=0;t<max;t++){
      var d=entries[t],link="";
      for(var s=0;s<(d.link||[]).length;s++){ if(d.link[s].rel==="alternate"){ link=d.link[s].href; break; } }
      var author=(d.author&&d.author[0]&&d.author[0].name&&d.author[0].name.$t)?d.author[0].name.$t:"Anonymous";
      var avatar=(d.author&&d.author[0]&&d.author[0].gd$image&&d.author[0].gd$image.src)?d.author[0].gd$image.src:defaultAvatar;
      avatar=sizeAvatar(avatar);
      var raw=(d.content&&d.content.$t)?d.content.$t:(d.summary&&d.summary.$t?d.summary.$t:"");
      var text=stripHTML(raw);
      var short=clampText(text,characters);
      if(showMorelink && text.length>short.length){ short+='<a href="'+link+'">'+moreLinktext+'</a>'; }
      html+='<li>';
      if(showAvatar){
        var cls=roundAvatar?"avatarRound":"";
        html+='<div class="avatarImage '+cls+'"><img class="'+cls+'" src="'+avatar+'" alt="'+author+'" width="'+avatarSize+'" height="'+avatarSize+'"></div>';
      }
      html+='<a href="'+link+'">'+author+'</a>';
      html+='<span>'+short+'</span>';
      html+='</li>';
    }
    html+='</ul>';
    var rc=document.getElementById('rc');
    if(rc) rc.innerHTML=html;
  }catch(e){ /* silent fail */ }
}

/* ====== Render total count ====== */
(function(){
  function renderCount(count){
    var el=document.getElementById('total-comments');
    if(el) el.textContent=count;
  }
  window.totalComments=function(json){
    var count=0;
    try{ count=json.feed.openSearch$totalResults.$t || 0; }catch(e){ count=0; }
    if(document.readyState==='loading'){
      document.addEventListener('DOMContentLoaded',function(){ renderCount(count); });
    }else{ renderCount(count); }
  };
})();
</script>

<!-- JSONP: tổng số bình luận -->
<script src="/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments"></script>
<!-- JSONP: danh sách bình luận gần đây -->
<script src="/feeds/comments/default?alt=json-in-script&max-results=5&callback=idbcomments"></script>

Lời kết

Trên đây là mình Share code recent comments siêu đẹp ai cũng mê. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Trick Pro