Hung Pro VN ™: Chia Sẽ Khung Bình Luận Ẩn Hiện Mới Nhất Trượt Dọc BlogSpot

Chào mọi người, từ khi mình quyết định chuyển sang giao diện hiện tại, mình thấy có nhiều thứ cần bổ sung, mình đã lục lọi Google và Chatgpt để tìm hiểu về việc phát triển và tối ưu giao diện thật tốt, và nay mình đã thêm mục New Comments riêng biết và trượt dọc theo blog cho mọi người dễ biết và nắm bắt được có người nào đang nhận xét bài viết của mình.

Chia Sẽ Khung Bình Luận Ẩn Hiện Mới Nhất Trượt Dọc BlogSpot

Và đoạn code này hoàn toàn đơn giản, mọi người chỉ việc bỏ vào Source Code trên blog là hoàn thành.

Chúng ta bắt đầu nhé.

Bước 1. Mọi người thêm đoạn code sau vào trong thẻ <b:skin><![CDATA[.

/* Nút mở comment */
.cmt-btn{
position: fixed;
right: 20px;
top: 20px;
width: 50px;
height: 50px;
background: #eea61c;
color: #fff;
border: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 99999;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* Sidebar comment */
.comment-sidebar{
position: fixed;
top: 0;
right: -400px; /* Ẩn ngoài màn hình */
width: 350px;
height: 100%;
background: #fff;
box-shadow: -2px 0 10px rgba(0,0,0,0.25);
z-index: 999999;
transition: 0.35s ease;
display: flex;
flex-direction: column;
}
/* Khi mở */
.comment-sidebar.active{
right: 0;
}
/* Header */
.cmt-header{
background: #eea61c;
color: #fff;
padding: 15px;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-btn{
font-size: 22px;
cursor: pointer;
}
/* Nội dung cuộn */
.cmt-body{
padding: 15px;
overflow-y: auto;
height: calc(100% - 60px);
}
/* Scrollbar đẹp */
.cmt-body::-webkit-scrollbar{
width: 6px;
}
.cmt-body::-webkit-scrollbar-thumb{
background: #ddd;
border-radius: 10px;
}

Bước 2. Ở trang Layout bạn thêm một phần từ HTML và để đoạn code sau vào.

<div id="openCommentsBtn" class="cmt-btn">
    &#9776;
</div>
<!-- Sidebar Comments -->
<div id="commentSidebar" class="comment-sidebar">
    <div class="cmt-header">
        <span>💬New Comments</span>
        <span id="closeCommentsBtn" class="close-btn">&#10005;</span>
    </div>
    <div class="cmt-body">
        <!-- New Comment -->
<script type="text/javascript">
var a_rc = 8;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}
</script><script src="//www.hung.pro.vn/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments"></script><br/><div style="font-size: 10px; float: right;">Get this <a href="/p/total-comment.html">Total Comments</a></div>
<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;color:black}
</style>
  <!-- End -->
        <!-- <div class="blogger-comments">...</div> -->
    </div>
</div>
</div>

Tiếp đó bạn thêm đoạn code Javascript này vào trên thẻ </body> nữa là ok.

<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>
<script>
document.getElementById("openCommentsBtn").onclick = function() {
    document.getElementById("commentSidebar").classList.add("active");
};

document.getElementById("closeCommentsBtn").onclick = function() {
    document.getElementById("commentSidebar").classList.remove("active");
};
  </script>

Như vậy đã hoàn thành thủ thuật tạo một khung nhận xét riêng biệt.

Bạn cần thay đổi domain trong đoạn code hung.pro.vn thành domain của các bạn là hoàn thành.

Chúc mọi người thành công.

DEMO TẠI BLOG NÀY.

Hoặc video bên dưới.

Ngoài ra mọi người có thể tùy biến đoạn code từ phần này <!-- New Comment --> đến <!-- End --> (bôi đó) xóa đi và áp dụng tiện ích khác của trang hoặc có thể trang quảng cáo hoặc những thứ bàn muốn ẩn hiện hiển thị trên trang tại đó.

☰

💬New Comments ✕

Get this Total Comments