Recent Comment With Interval

Photo diatas adalah bukan demo aslinya.

SIMPAN RECENT COMMENT WITH INTERVAL DI HEADER YAA [RECOMENDED]

Javascript

<div id='rCommWidget'></div>
<script type='text/javascript'>
                  var notifCount = 5;
                  //<![CDATA[
                    var titleBlog = $('title').text();
                    var cm_config = {
                      home_page: '//' + window.location.hostname,
                      max_result: notifCount,
                      t_w: 60,
                      t_h: 60,
                      summary: 100,
                      ct_id: 'rCommWidget',
                      new_cm: ' Komentar Baru!',
                      interval: 5000,
                      alert: function(total, label) {
                        $('.btnNotif span').html('<b>'+total+'</b>');
                        $('.btnNotif span').addClass('show');
                        $('title').text('(💬 '+total+' ) '+titleBlog);
                      }
                    };
                    $(document).on('click','.btnNotif',function(){
                      $(this).find('span').removeClass('show');
                      $('.blog_notif').toggleClass('open');
                      $('title').text(titleBlog);
                    });
                    $(document).on('click','.blog_notifClose',function(){
                      $('.blog_notif').removeClass('open');
                    });
                    //]]>
                </script>
<script src='https://twinnybloggers.github.io/twinny-support/tokko_script-recent-comment.js'></script>

Css Stylesheet

#rCommWidget {
          display: block;
          min-height: 400px;
          background-size: 40px auto;
	  }

      #rCommWidget .rCommOuter {
          font-size: 95%;
      }

      #rCommWidget .rCommOuter,
      #rCommWidget .rCommOuter * {
          display: block;
      }

      #rCommWidget .rCommOuter li:after {
          content: '';
          display: block;
          clear: both;
      }

      #rCommWidget .rCommOuter li {
          border-bottom: 1px solid #eee;
          padding: 15px;
          transition: .05s ease-in;
      }

      #rCommWidget .rCommOuter li:hover {
          background: #fafafa;
      }

      #rCommWidget .rCommOuter li:last-child {
          border-bottom: none;
          margin-bottom: none;
          padding-bottom: none;
      }

      #rCommWidget .rCommOuter li .item1 {
          width: 40px;
          height: 40px;
          border-radius: 999px;
          background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhpTXhINqQy3YQgBsX674b6DbzTujyYgcxnlDcLhHY59Un08g165A_b3PjjVPwuJG6b4FQxtAc-F1XhIjWSKkquNPbj_2Qf13-BO0W0DoxFIKCri6KJv2d7cUo00dPZdayFYnK6BejJ1U/h100/ava.png) no-repeat center center;
          background-size: cover;
          float: left;
          overflow: hidden;
          display: flex;
		  border: 2px solid #fff;
      }

      #rCommWidget .rCommOuter li .item1 img {
          margin: auto;
      }

      #rCommWidget .rCommOuter li .item2 .rCommHeader,
      #rCommWidget .rCommOuter li .item2 .rCommHeader * {
          display: inline-block !important;
      }

      #rCommWidget .rCommOuter li .item2 .rCommHeader b {
          text-transform: capitalize;
      }

      #rCommWidget .rCommOuter li .item2 {
          display: block;
          float: right;
          width: calc(100% - 55px);
      }

      #rCommWidget .rCommOuter li .item2 .rCommText {
          margin-top: 5px;
      }

      #rCommWidget .rCommOuter li .item2 .rCommText small * {
          display: inline-block;
          vertical-align: middle;
      }

      @media only screen and (max-width:768px) {

          #rCommWidget .rCommOuter li .item1 {
              width: 40px;
              height: 40px;
              border-radius: 990px;
          }

          #rCommWidget .rCommOuter li .item2 {
          	  width: calc(100% - 75px);
          }
      }
      .btnNotif {
          position: relative;
      }
      .btnNotif span {
          display: inline-block;
          white-space: nowrap;
          padding: 4px 8px;
          font-weight: 600;
          font-size: 11px;
          border-radius: 20px 20px 20px 0px;
          text-align: center;
          background: indianred;
          color: #fff;
          box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
          font-weight: 600;
          line-height: 1;
          position: absolute;
          z-index: 1;
          top: -25px;
          right: -50px;
          visibility: hidden;
      }
      .btnNotif span.show {
          visibility: visible;
      }

HASIL