Chia sẻ Code Widget Recent Comment cho Median UI 1.7

Hê lô mọi người, hôm nay rảnh viết bài cho mọi người xem nè. Hôm nay mình sẽ Hướng dẫn mọi người cài cái widget bình luận gần đây lên thanh header như mình cho template Median UI v1.7 này nhé. Ok let's go thôi.

Xàm lìn chém gió

Code mình chia sẻ dưới đây cũng là do mình rip về rồi tìm tòi cách cài đặt nên nó vẫn còn lỗi. Bởi vì Template này mới nhiều tác giả không viết về mấy cái Widget này. Nên mình tự rip, có lỗi gì mong các bạn bỏ qua :0

Hướng dẫn

Code này nó chỉ lỗi ở chỗ phần hiển thị giây nhìn nó hơi xấu và cái hiển thị bình luận chưa đọc chạy nhảy linh tinh (cái này để mình xem lại), còn lại là okela

Đăng nhập vào trang Blogger muốn cài đặt (phải sử dụng Template Median UI v1.7)
Sau đó bạn vào mục Chủ đề, sau đó chọn vào nút mũi tên và nhấn vào Chỉnh sửa HTML
Widget này sử dụn Fontawesome v5, bạn nào có rồi thì thôi còn bạn nào chưa thì copy link thư viện awesome vào thẻ <html> hoặc thẻ <head>
```
<link href='https://cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
```
Khi hoàn thành các bước trên, bạn tìm đến thẻ <b:section id='header-icon', ở phần maxwidgets='5', bạn +1 vào cái số mà mình đánh dấu trên Blogger của bạn
Tiếp đến, bạn thêm thẻ sau vào bên dưới thẻ <b:widget-setting name='shownum'/>
```
<b:widget-setting name='item-4'>Comments</b:widget-setting>
```

Tiếp theo, bạn thêm thẻ sau

<label aria-label='Comments' class='popup-cmt bc fc ic op i20 noJava' for='cmtCheck'>
<svg class='line' viewBox='0 0 24 24'><path d='M22 10V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H14'/><path d='M19.5 7C20.8807 7 22 5.88071 22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7Z'/></svg>
</label>

vào bên dưới thẻ <b:loop index='icon' values='data:items' var='item'>

Thay đổi thẻ mà mình sắp xếp thành số mà bạn yêu thích miễn là nó trong trong khoảng từ 0-(số mà bạn đã cài đặt ở thẻ nhưng phải -1). Đây là sắp xếp icon trên header bạn xem hình ảnh bên dưới nhé

Sau đó bạn tìm đến thẻ </b:skin> và dán code sau vào trước thẻ đó

/* CSS Popup Recent Comments */ .popup-cmt{position:relative}.popup-cmt:before{content:attr(data-text);font-size:8px;line-height:14px;padding:1px 5px;border-radius:10px;background:var(--synRed);color:#fff;position:absolute;top:0;left:15px;z-index:89001}.popup-cmt:not([data-text]):before{padding:0;}.cmt-frame{position:fixed;top:-5px;right:25px;background:var(--contentBg);border-radius:16px 5px 16px 16px;width:350px;height:calc(100% - 350px);box-shadow:0 10px 25px -3px rgba(0,0,0,.1);transition:var(--trans-4);z-index:89001;opacity:0;visibility:hidden;display:flex;flex-direction:column}#cmtCheck:checked ~ .cmt-frame{top:60px;opacity:1;visibility:visible}#cmtCheck:checked ~ .cmt-close{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.cmt-header{padding:12px 16px 6px;display:flex;justify-content:space-between;align-items:center;border-radius:16px 5px 0 0}.fa-pen-square{opacity:.6}.cmt-header > i{font-size:26px;color:var(--themeLink)}.cmt-footer{height:40px;display:flex;justify-content:center;align-items:center;box-shadow:rgba(149,157,165,0.15) 0 -8px 24px;border-radius:0 0 16px 16px}.cmt-list{flex:1;overflow:auto}.cmt-ul{padding:0;margin:8px;list-style:none}.cmt-li{display:flex;border-radius:8px;position:relative}.cmt-li:hover{background:var(--transB)}.cmt-avatar{width:40px;height:40px;object-fit:cover;max-width:inherit;margin-right:15px;border-radius:30%}.cmt-content{color:inherit;display:flex;padding:8px 24px 8px 8px;width:100%}.cmt-content p{margin:0;word-break:break-word}.cmt-content span{font-size:85%;opacity:.8}.nB[data-theme=dark] .cmt-frame{background:var(--darkBg-sec);box-shadow:0 10px 40px rgba(0,0,0,.2)}.nB[data-theme=dark] .cmt-content{color:inherit}.nB[data-theme=dark] .cmt-footer{box-shadow:rgb(0 0 0 / 15%) 0 -8px 24px}.Rtl .cmt-frame{left:25px;right:auto;border-radius:5px 16px 16px 16px}.Rtl .cmt-avatar{margin-left:15px;margin-right:0}@media screen and (max-width:480px){.cmt-frame,.Rtl .cmt-frame{left:10px;right:10px;width:auto;border-radius:16px}#cmtCheck:checked ~ .cmt-frame{top:75px}#cmtCheck:checked ~ .cmt-close{background:rgba(0,0,0,.2);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px)}.cmt-frame:before{content:'\f075';font-family:'Font Awesome 5 Pro';position:fixed;font-size:25px;width:50px;height:50px;background:var(--contentBg);display:flex;justify-content:center;align-items:center;border-radius:35%;top:-65px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#cmtCheck:checked ~ .cmt-frame:before{top:15px}.cmt-frame:after{content:'';position:fixed;border:8px solid;border-color:transparent transparent var(--contentBg);top:-20px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#cmtCheck:checked ~ .cmt-frame:after{top:60px}.nB[data-theme=dark] .cmt-frame:before{background:var(--darkBg-sec)}.nB[data-theme=dark] .cmt-frame:after{border-color:transparent transparent var(--darkBg-sec)}}.new-cmt:after{content:'';position:absolute;right:8px;width:8px;height:8px;top:50%;transform:translateY(-50%);background:var(--linkC);border-radius:50%}.new-cmt .cmt-time{color:var(--linkC);opacity:1}.nB[data-theme=dark] .new-cmt:after{background:var(--darkU)}.nB[data-theme=dark] .new-cmt .cmt-time{color:var(--darkU)}.cmt-author i{opacity:.8;font-size:80%;margin:0 3px}

Sau đó bạn lưu lại, bạn quay lại phần Bố cục, ở phần settings-id bạn thêm 1 tiện ích HTML/JavaScript Sau khi xong bạn bỏ không phần tiêu đề và dán code sau vào phần nội dung

<input class='hidden' id='cmtCheck' type='checkbox'/>
<label class='cmt-close' for='cmtCheck'></label>
<div class='cmt-frame'>
<div class='cmt-header'>
<h6>Bình luận</h6>
<i class='fad fa-comments'></i>
</div>
<div class='cmt-list'>
<ul class='cmt-ul'>
</ul>

</div>
<div class='cmt-footer'><a class='more-cmt' href='/p/recent-comment.html' target='_blank' title='Xem tất cả bình luận'>Xem tất cả bình luận</a></div>
</div>
<script>
/*<![CDATA[*/
var limCmt=30,lengthName=25,lengthContent=100,adminUri="https://www.blogger.com/profile/02138557163748036302",blogUri="https://bloggercuachinhbeta.blogspot.com/",noAvatar="https://imgur.com/vpFKnLD.png",comments=[],countNewCmt=0,commentBtn=document.querySelector(".popup-cmt"),closeLabel=document.querySelector(".cmt-close");

function innerTotalComments(t){
    var e=parseInt(t.feed.openSearch$totalResults.$t),n=parseInt(localStorage.getItem("seen"));
    n=n||0,document.querySelector(".more-cmt").innerHTML=`Xem tất cả <b>${e}</b> bình luận`,document.querySelector(".more-cmt").title=`Xem tất cả ${e} bình luận`,e>n?document.querySelector(".popup-cmt").dataset.text=e-n:e<n&&localStorage.setItem("seen",e),countNewCmt=e-n
}

function innerComment(t){
    var e="<ul class='cmt-ul'>";
    for(let n=0;n<t;n++){
        var l=comments[n];
        e+=`<li class="cmt-li ${countNewCmt>0?"new-cmt":""}"><a class="cmt-content" href=${l.link} rel="nofollow" title="${l.fullContent}"><div class="cmt-info"><img class="cmt-avatar" src=${l.avatar} /></div><div class="cmt"><p>${l.content}</p><span class="cmt-time">${l.time} </span> <span class="cmt-author">${l.rep?'<i class="fas fa-reply"></i>':'<i class="fas fa-pen"></i>'} ${l.author}</span></div></a></li>`,countNewCmt--
    }
    e+="</ul>",document.querySelector(".cmt-list").innerHTML=e
}

function rcComments(t){
    var e=limCmt>t.feed.entry.length?t.feed.entry.length:limCmt;
    for(let n=0;n<e;n++){
        var l=t.feed.entry[n],r=l.author[0].name.$t;
        r=r.length<lengthName?r:r.substring(0,lengthName)+"...";
        var o=l.content.$t;
        o=(o=o.replace(/(<([^>]+)>)/g," ")).length<lengthContent?o:o.substring(0,lengthContent)+"...";
        var c=new Date(l.published.$t),m=Math.floor((new Date()-c)/1e3),a=m<60?m+" giây trước":m<3600?Math.floor(m/60)+" phút trước":m<86400?Math.floor(m/3600)+" giờ trước":m<604800?Math.floor(m/86400)+" ngày trước":Math.floor(m/604800)+" tuần trước",s={author:r,avatar:l.author[0].gd$image.src==noAvatar?noAvatar:l.author[0].gd$image.src,content:o,fullContent:l.content.$t.replace(/(<([^>]+)>)/g," "),time:a,link:l.link[2].href,rep:4==l.link.length};
        comments.push(s)
    }
    innerTotalComments(t),innerComment(e)
}
document.write(`<script type="text/javascript" src="${blogUri}/feeds/comments/default?alt=json-in-script&max-results=${limCmt}&callback=rcComments"><\/script>`),commentBtn&&commentBtn.addEventListener("click",function(){
    var t=parseInt(commentBtn.dataset.text),e=parseInt(localStorage.getItem("seen"));
    e=e||0,t&&(localStorage.setItem("seen",t+e),delete commentBtn.dataset.text)
}),closeLabel&&closeLabel.addEventListener("click",()=>{
    var t=document.querySelectorAll(".new-cmt");
    t&&t.length>0&&t.forEach(t=>{t.classList.remove("new-cmt")})
});
/*]]]]><![CDATA[>*/
</script>
<script type='text/javascript'>
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src = home_page + "/feeds/comments/default?alt=json&callback=comment_render&max-results=" + maxComments;
        document.body.appendChild(script);
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var TxtRotate = function (t,e,i){this.toRotate = e,this.el = t,this.loopNum = 0,this.period = parseInt(i,10) || 2e3,this.txt = "",this.tick(),this.isDeleting = !1;}
;TxtRotate.prototype.tick = function (){var t = this.loopNum % this.toRotate.length,e = this.toRotate[t];this.isDeleting ? this.txt = e.substring(0,this.txt.length - 1):this.txt = e.substring(0,this.txt.length + 1),this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";var i = this,s = 300 - 100 * Math.random();this.isDeleting && (s /= 2),this.isDeleting || this.txt !== e ? this.isDeleting && "" === this.txt && (this.isDeleting = !1,this.loopNum++,s = 500):(s = this.period,this.isDeleting = !0),setTimeout(function (){i.tick();}
,s);}
,window.onload = function (){for (var t = document.getElementsByClassName("txt-rotate"),e = 0;e < t.length;e++){var i = t[e].getAttribute("data-rotate"),s = t[e].getAttribute("data-period");i && new TxtRotate(t[e],JSON.parse(i),s);}
var o = document.createElement("style");o.type = "text/css",o.innerHTML = ".txt-rotate > .wrap{border-right:0.08em solid #666;}
",document.body.appendChild(o) // highlight-line;}
;/*]]]]><![CDATA[>*/
</script>

Thay đổi các phần mình đánh dấu thành các nội dung của bạn
- /p/recent-comment.html thành trang hiển thị bình luận của bạn
- 02138557163748036302 thành ID hồ sơ Blogger của bạn
- https://bloggercuachinhbeta.blogspot.com/ thành URL Blogger của bạn

Lưu tất cả lại

FAQ

Đây là mấy câu hỏi có thể các bạn sẽ gặp khi cài widget này

Lỗi hiển thị comment chưa đọc thì là thế nào?

Cái này có thể bạn không gặp 😀

Lỗi khi cài mà tự nhân bản ra nhiều icon?

Lỗi này thì các bạn làm theo các bước sau nhé

Bạn quay lại trang Bố cục
Ở tiện ích header-icon bạn xóa mấy icon mà nó tự nhân bản ra và chỉ giữ lại 1, nếu không có icon coment bạn thêm lại với cái tên Comments
Và ở phần số mục hiển thị trên danh sách bạn nhập con số mà bạn nhập ở phần maxwidgets='5'

Lấy link /p/recent-comment.html như thế nào?

Cái này thì dễ thôi

Bạn tạo trang mới, đặt tiêu dề tùy bạn, bạn chọn Chế độ xem HTML và dán code sau vào đó

            <!--Hiển thị bình luận-->
<link href="//cdn.leanhduc.pro.vn/blogger/codeprovn/template-median/recent-comment/style.css" rel="stylesheet" type="text/css"/>
<script src="//cdn.leanhduc.pro.vn/blogger/codeprovn/template-median/recent-comment/main.js" type="text/javascript"></script>
<script src="/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=50" type="text/javascript"></script>

Lời kết

Vậy là mình đã hướng dẫn xong các bạn cách thêm Widget Reccent Comment cho Median UI 1.7 rồi. Nếu thấy hay hãy chia sẻ, để lại comment, thả cảm xúc để mình biết nhé. Tim

Code có lỗi, xin đừng gạch đá vì mình chưa muốn xây nhà, hãy bình luận chỗ mà bạn chưa hiểu để mình giải thích cho nhé

Tham khảo thêm :

Life is not fair - get used to it!

Chỉnh

Bình luận

Thông báo

Chia sẻ Code Widget Recent Comment cho Median UI 1.7

Xàm lìn chém gió

Hướng dẫn

FAQ

Lời kết

Nhúng video từ Youtube

Đặt liên kết bạn bè phát triển blog

Share code widget bạn bè cho blogspot

Chia sẻ Code Widget Thông Báo cho Median UI 1.7

Template Median UI v1.7 (Edit)

Nguyễn Bá Chỉnh

Partner

Tools

Main category

Sub category

Bình luận

Thông báo

Chia sẻ Code Widget Recent Comment cho Median UI 1.7

Xàm lìn chém gió

Hướng dẫn

FAQ

Lời kết

Tham gia cuộc trò chuyện