Cách tạo tiện ích Nhận xét/Bình luận cho Template Median UI
Nhìn nó khá hợp với Template Median UI. Tiện ích này theo cá nhân mình chỉ hợp với nhưng ai sử dụng Template Median UI. Nên là nếu mọi người dùng Template khác up lên thấy xấu thì cũng đừng chửi mình nha!
Cách tạo tiện ích Nhận xét/Bình luận cho Template Median UI:
Bước 1: Tìm thẻ<b:section id='header-icon'
Bước 2: Sao chép
<b:widget-setting name='item-4'>Comment</b:widget-setting> dán xuống bên dưới thẻ <b:widget-setting name='shownum'/>
Bước 3: Sao chép và dán đoạn code dưới đây xuống bên dưới thẻ
<b:loop index='icon' values='data:items' var='item'>
<!-- comt icon -->
<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>
Bước 4: Sao chép và dán đoạn code bên dưới này lên bên trên thẻ ]]></b:skin>
/* 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}
Bước 5:
- Vào Bố cục và tìm phần settings-id
- Ấn thêm tiện ích
- Chọn HTML/JavaScript
- Tiêu đề để trống(không điền gì cả)
- Sao chép và dán đoạn code dưới đây 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/3643091718526849248",blogUri="https://tda-official.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>
adminUri="https://www.blogger.com/profile/3643091718526849248" các bạn thay thành ID blog của các bạn nhé
blogUri="https://tda-official.blogspot.com/" các bạn thay thành URL blog của các bạn nhé
Bước 6: Ấn Lưu và xem kết quả thôi!
Lời kết:
Như vậy mình đã chia sẻ cho bạn code và hướng dẫn tạo tiện ích Nhận xét/Bình luận cho Template Median UI, nếu thấy hay thì cho mình xin 1 cảm nhận và 1 nhận xét nhé!
4 nhận xét