How to create recent comments fixed for blogger/blogspot

How to create recent comments fixed for blogger/blogspot

Want to create a recent comment window on your blog site? Share with you how to create recent comments fixed for blogger/blogspot.

{tocify} $title={Mục lục}

Comments are how users interact with your website. Therefore, viewing a series of recent comments helps you better support your users. In addition, other users can easily see people's reviews of articles on your blog.

What is recent comments fixed?

Recent Comments Fixed is a box containing comments that users have entered on your blog. It only shows up when you click on the icon representing it. When you click on the icon representing it, a comment box will appear on the right side of your browser screen.

You and your users can view recent comments on all posts from anywhere.

Code create recent comments fixed

Comment icon code

The best place to put icon is on the menu bar.

<b:tag class='notif-show' href='javascript:;' name='a'>
    <b:tag class='fas fa-comments' name='i'/>
    <b:tag class='sindicat' name='span'/>
</b:tag>{codeBox}

CSS code

Put this code before the tag ]]></b:skin>.

/* --------------------------------------------CSS tạo nhận xét mới--------------------------------------------- */
/* --------Phân tử đầu tiên-------- */
.notif-show {color: #1767d0!important;font-size: 16px;font-weight: normal;width: auto;padding: 0;cursor: pointer;backface-visibility: hidden;-webkit-transform: translateZ(0);transform: translateZ(0);border-radius: 2px;transition: all .6s;}
.notif-show:hover{animation:rubberBand 1s}
.notif-show .sindicat {display: block;font-size: 16px;background: #ff3333;position: absolute;top: 0;right: 0;width: 8px;height: 8px;border-radius: 8px;}
.sindicat {animation: sindicat 0.5s ease infinite;}
/* -------Phân tử thứ hai-------- */
#disqus-notif {overflow: hidden;height: 100%;position: fixed;background: #fff;z-index: 999;width: 25%;top: 0;right: -769px;bottom: 0;transition: all .5s;}
#disqus-notif.active {right: 0;}
.header-1 {background: #1a73e8;color: #fff;height: auto;padding: 10px;overflow: hidden;}
.header-1 h4 {font-size: 18px;float: left;color: #fff;line-height: 2em;}
#disqus-notif .close-1 {font-size: 35px;font-weight: 700;color: #fff;line-height: 0.8em;position: relative;float: right;right: -20px;}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#disqus-notif .close-text {display: inline-block;font-weight: 700;font-size: 14px;position: relative;right: 15px;top: -7px;visibility: hidden;opacity: 0;transition: all .5s;}
#RecentComments {overflow: auto;display: block;width: 100%;margin: 0 auto;padding: 0;height: 100%;}
.nxmoi{color: #111;}
.nxmoi li{margin:0px;padding:10px;}
.nxmoi li:hover:before{background:#F48FB1}
.nxmoi span a{color:#1a73e8;font-weight:600;transition: color .3s;}
.nxmoi span a:hover{color:#111;transition: color .3s;}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width: 1366px){#disqus-notif {width: 35%;}}
@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{display:block;text-align:left;margin:0;padding:0 25px;position:relative;font-size:35px;font-weight:700;color:#fff;float:right;}#disqus-notif .close-text{display:none}}
/* ------Animation-------- */
@-webkit-keyframes sindicat {from{transform:scale(1)}10%{transform:scale(1.2)}}
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}{codeBox}
 

Code to create comment box

Put this code before the closing tag </body>.

<!-- Code tạo nhận xét mới -->
<div class='' id='disqus-notif'>
      <div class='header-1'>
          <h4>Thảo Luận</h4>
          <a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a>
      </div>
      <div class='dsq-widget' id='RecentComments'>
          <script type='text/javascript'>//<![CDATA[
              var sl_nhanxet = 20,
                  kt_nhanxet = 70;
              // Recent Comment
              function nhanxetmoi(json) {
                  var entry, commurl, commsum;
                  document.write('<ul class="nxmoi">');
                  for (var i = 0; i < sl_nhanxet; i++) {
                      entry = json.feed.entry[i];
                      if (i == json.feed.entry.length) break;
                      for (var k = 0; k < entry.link.length; k++) {
                          if (entry.link[k].rel == 'alternate') {
                              commurl = entry.link[k].href;
                              break;
                          }
                      }
                      commsum = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";
                      commsum = commsum.replace(/<.*?>/g, "");
                      if (commsum.length > kt_nhanxet) commsum = commsum.substring(0, kt_nhanxet) + "...";
                      document.write('<li><span><a href="' + commurl + '" rel="nofollow">' + entry.author[0].name.$t + ':</a></span> <span>' + commsum + '</span></li>');
                  }
                  document.write('</ul>');
              }
              $("#disqus-notif").parent(".widget").attr("style","display:none");
          //]]></script>
          <script src='/feeds/comments/summary?alt=json-in-script&amp;callback=nhanxetmoi'/>
      </div>
</div>{codeBox}

JavaScript code

Put this code before the closing tag </body>.

<script type='text/javascript'>
// JavaScript show recent comments
  $(function(){$(&quot;.notif-show&quot;).on(&quot;click&quot;,function(){$(&quot;#disqus-notif&quot;).addClass(&quot;active&quot;).focus()});$(&quot;.close-1&quot;).on(&quot;click&quot;,function(){$(&quot;#disqus-notif&quot;).removeClass(&quot;active&quot;)})});
</script>{codeBox}

Want to see what it looks like? Right here on my blog, click on the comment icon on the menu bar.

Good luck! Support me with an ad click.

Một số lưu ý khi bình luận

1. Nội dung bình luận đúng với chủ đề bài viết và không chứa các từ ngữ thô tục.

2. Nội dung bình luận không kèm theo các link spam.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Nếu vi phạm một trong hai điều trên sẽ bị xóa bình luận hoặc BAN vĩnh viễn.

There are 2 comments
Display
  1. Cho mình xin liên kết
    URL: https://www.nguyenhablog.com/
    Tiêu đề: Nguyen Ha Blog

    ReplyDelete
Previous Post Next Post

Discuss

×Close