Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Hướng dẫn thêm widget Recent Comment v2 cho template Median UI 1.6

Hê's lô hê's lyly, chắc là cũng lâu lắm rồi mình không viết bài nhỉ, viết cứ thấy ngượng ngượng. Bỏ qua cái vấn đề đấy thì như tiêu đề của bài viết, hôm nay tôi sẽ mang đến cho anh em phiên bản v2 của con hàng Recent Comment.

Hướng dẫn thêm widget Recent Comment v2 cho template Median UI 1.6

Nói thì là v2 nhưng thực ra chỉ có một chút thay đổi so với v1 thôi. Không lòng vòng nhiều thì sau đây là một vài thay đổi và ảnh demo cho anh em này.

  • Thêm tên người bình luận và thời gian bao lâu trước đó dưới bình luận.
  • Thêm đếm số bình luận chưa đọc.
  • Cải tiến giao diện.
Con ảnh đề's mô cho bản Recent Comment v2

Hướng dẫn

Bước 1: Thêm icon comment vào thanh header

  1. Tìm section sau trong template <b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'>
  2. Kéo xuống 1 chút sẽ thấy thẻ <ul class='headIc'>. Các bạn tìm thẻ <b:if đầu tiên và sửa 3 thành 4 hoặc 2 thành 3 gì đấy nói chung là cộng thêm 1 vào, sau đó thêm đoạn code bên dưới vào sau thẻ </li> đầu tiên
    <b:elseif cond='data:item == &quot;Comments&quot;'/>
    <li>
      <b:class cond='data:item == &quot;Comments&quot;' name='isCmt'/>
        <label class='popup-cmt tIc bIc' expr:aria-label='data:item' for='cmtCheck'>
        <b:include name='messages-icon'/>
      </label>
    </li>
  3. Sau đó các bạn kéo lên trên phần <b:widget-settings> và thêm một cái <b:widget-settings> kiểu như bên dưới đây.
    <b:widget-settings>
      <b:widget-setting name='shownum'>5</b:widget-setting>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='item-4'>Profile</b:widget-setting>
      <b:widget-setting name='item-3'>Search</b:widget-setting>
      <b:widget-setting name='item-2'>Dark</b:widget-setting>
      <b:widget-setting name='item-1'>Comments</b:widget-setting>
      <b:widget-setting name='item-0'>Notification</b:widget-setting>
    </b:widget-settings>
    
  4. Các bạn có thể chỉnh sửa số thứ tự của item-i để đổi vị trí các icon trên header
  5. Phần này hơi phức tạp nên mình để một số hình ảnh minh họa ở bên dưới nhé

Bước 2: Thêm HTML Popup comment

Các bạn thêm đoạn HTML sau vào sau thẻ <body> vậy là xong bước này.

<!-- [ PopUp Recent Commnets ] -->  
<input class='hidden' id='cmtCheck' type='checkbox'/>
<label class='cmt-close' for='cmtCheck'/>
<div class='cmt-frame'>
  <div class='cmt-header'>
    <h3>Bình luận</h3>
    <svg viewBox='0 0 24 24'>
      <style type='text/css'>
        .st0{fill:#4C4C4C;}
        .drK .st0{fill:#C7C7C7;}
      </style>
      <path class='st0' d='M21,0H3C1.3,0,0,1.3,0,3v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V3C24,1.3,22.7,0,21,0z M22.5,21             c0,0.8-0.7,1.5-1.5,1.5H3c-0.8,0-1.5-0.7-1.5-1.5V3c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5V21z'/>
      <path class='st0' d='M17.1,9.7l-8.2,8.2C8.8,17.9,8.7,18,8.7,18l-2.9,1c-0.1,0-0.1,0-0.2,0c-0.2,0-0.2-0.2-0.2-0.4l1-2.9             c0-0.1,0.1-0.2,0.1-0.2l8.2-8.2L17.1,9.7z'/>
      <path class='st0' d='M19.2,7.6l-1.2,1.2l-2.4-2.4l1.2-1.2C17,5,17.4,5,17.6,5.2l1.5,1.5C19.4,7,19.4,7.3,19.2,7.6z'/>
    </svg>
  </div>
  <div class='cmt-list'>
  </div>
  <div class='cmt-footer'>
    <a class='more-cmt' href='/p/comment.html' target='_blank' title=''/>
  </div>
</div>

Bước 3: Thêm CSS

Bên dưới đây là CSS của popup, các bạn dán vào phần css của template là cũng xong bước này luôn.

/* CSS Popup Recent Comments */ .popup-cmt:before{content:attr(data-text);font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:-2px;z-index:2}.cmt-frame{position:fixed;top:-5px;right:25px;background:var(--contentB);border-radius:16px 5px 16px 16px;width:350px;height:calc(100% - 120px);box-shadow:0 10px 25px -3px rgba(0,0,0,.1);transition:var(--trans-4);z-index:9999;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 16px;display:flex;justify-content:space-between;align-items:center;border-radius:16px 5px 0 0}.fa-pen-square{opacity:.6}.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{margin:0;padding:8px 18px;list-style:none}.cmt-li{display:flex;margin-bottom:15px}.cmt-avatar{width:40px;height:40px;object-fit:cover;max-width:inherit;margin-right:15px;border-radius:30%}.cmt-content{color:inherit}.cmt-content p{margin:0;word-break:break-word;}.cmt-content span{font-size:85%;opacity:.8}.drK .cmt-frame{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .cmt-content{color:inherit}.drK .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(--contentB);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(--contentB) transparent;top:-20px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#cmtCheck:checked ~ .cmt-frame:after{top:60px}.drK .cmt-frame:before{background:var(--darkBs)}.drK .cmt-frame:after{border-color:transparent transparent var(--darkBs) transparent}}

Bước 4: Thêm JavaScript

Còn bước này nữa là các bình luận hiển thị ầm ầm luôn. Các bạn dán đoạn code dưới đây vào trước thẻ đóng </body> là xong.

<script>/*<![CDATA[*/
var limCmt = 30, // Số lượng comment tối đa
	lengthName = 25, // Độ dài tên tối đa
	lengthContent = 100, // Độ dài comment tối đa
	adminUri = 'https://www.blogger.com/profile/18423549431708960193', // Avatar admin
	blogUri = 'https://vanlinhxyz.blogspot.com/', // Linh blog
	noAvatar = 'https://imgur.com/vpFKnLD.png', // Avatar ẩn danh
	comments = []; // List comment

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

// Render comment ra popup
function innerComment(t){var l="<ul class='cmt-ul'>";for(let a=0;a<t;a++){var n=comments[a];l+=`
<li class="cmt-li">
  <div class="cmt-info">
    <img class="cmt-avatar" src=${n.avatar} />    
  </div>
  <a class="cmt-content" href=${n.link} rel="nofollow" title="${n.content}">
    <p>${n.content}</p>
    <span>${n.author} - ${n.time}</span>
  </a>
</li>
`}l+="</ul>",document.querySelector(".cmt-list").innerHTML=l}

// Xử lý dữ liệu comment trả về
function rcComments(t){var r=limCmt>t.feed.entry.length?t.feed.entry.length:limCmt;for(let e=0;e<r;e++){var o=t.feed.entry[e],g=o.author[0].name.$t;g=g.length<lengthName?g:g.substring(0,lengthName)+"&#133;";var n=o.content.$t;n=(n=n.replace(/(<([^>]+)>)/g," ")).length<lengthContent?n:n.substring(0,lengthContent)+"&#133";var $=new Date(o.published.$t),a=Math.floor((new Date-$)/1e3),l=a<60?a+" gi\xe2y trước":a<3600?Math.floor(a/60)+" ph\xfat trước":a<86400?Math.floor(a/3600)+" giờ truớc":a<604800?Math.floor(a/86400)+" ng\xe0y truớc":Math.floor(a/604800)+" tuần truớc",i={author:g,avatar:"https://img1.blogblog.com/img/b16-rounded.gif"==o.author[0].gd$image.src?noAvatar:"https://img1.blogblog.com/img/blank.gif"==o.author[0].gd$image.src?noAvatar:o.author[0].gd$image.src,content:n,time:l,link:o.link[2].href};comments.push(i)}innerComment(r),innerTotalComments(t)}

// Gọi API lấy comment
document.write(
`<script type="text/javascript" src="${blogUri}/feeds/comments/default?alt=json-in-script&max-results=${limCmt}&callback=rcComments"><\/script>`
);

// Hiển thị số bình luận chưa đọc
var commentBtn=document.querySelector(".popup-cmt");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)});/*]]>*/</script>

Lưu ý nên cài đặt FontAwesome v5 để hiển thị đầy đủ các icon.

Thay các thông tin ở đầu file js để các comment được hiển thị đúng với blog của bạn.

Lời kết

Trê đây là toàn bộ hướng dẫn của mình về cách thêm popup Recent Comment Version 2. Mọi thắc mắc xin vui lòng để lại comment bên dưới. Cảm ơn các bạn đã đọc bài viết của mình!

Copyright © Phạm Văn Linh

Đánh Giá Bài Viết:
No pain, no gain !

Đăng nhận xét

© Phạm Văn Linh. All rights reserved. Developed by Jago Desain
-->