Extract Komentar Baru Contempo (^^) v2

 
/* <!-- Variable definitions -->
 <Group description="Comments" selector=".comments-container"><Variable name="comment.container" description="comment.container" type="color" default="transparent" value="transparent"/><Variable name="comment.chat.background" description="comment.chat.background" type="color" default="#efefef" value="#efefef"/><Variable name="comment.link.color" description="comment.link.color" type="color" default="#4a85db" value="#4a85db"/><Variable name="comment.time.color" description="comment.time.color" type="color" default="#bbbbbb" value="#bbbbbb"/><Variable name="comment.button.color" description="comment.button.color" type="color" default="#4a85db" value="#4a85db"/><Variable name="comment.button.color.hover" description="comment.button.color.hover" type="color" default="#4a85db" value="#4a85db"/><Variable name="comment.message.color" description="comment.message.color" type="color" default="#fff" value="#ffffff"/><Variable name="comment.message.background" description="comment.message.background" type="color" default="#4a85db" value="#4a85db"/></Group> <Group description="New Comment Required - Dont edit"><Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/><Variable name="body.font" description="Font" type="font" default="normal normal 14px 'roboto',sans-serif" value="normal normal 14px &#39;roboto&#39;,sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222"/><Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px &#39;roboto&#39;,sans-serif"/><Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff"/><Variable name="body.link.color" description="7" type="color" default="#2196f3" value="#2196f3"/><Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#2196f3"/><Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#2196f3"/><Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)"/><Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff"/><Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff"/><Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/><Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc"/><Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff"/><Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff"/><Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222"/><Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121"/><Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121"/><Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)"/><Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;,sans-serif"/><Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222"/><Variable name="posts.icons.color" description="23" type="color" default="#707070" value="#707070"/><Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/></Group> */
 
/* ==========================================================================
 Comment CSS
 ========================================================================== */
 #comments{background:$(comment.container)}
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:1em}
.comments .title{text-transform:uppercase;border-bottom:1px solid #EEE;padding:20px 15px 15px;font-size:20px;margin:0 10px 10px;text-align:center;font-weight:400}
.comments .comments-content{padding-top:0;font-size:12px;font-weight:400;text-align:left;line-height:1.4em}
.comments .comment-message{position:relative;padding:1.2em 1.5em;margin:15px 10px 20px 0;color:$(comment.message.color);overflow:hidden;border:none;background:$(comment.message.background);line-height:1.6}
.comments .comment-message:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);display:block;width:0;border-color:#fff #fff $(comment.message.background) $(comment.message.background);background:$(comment.message.background)}
.comment-disable{padding:20px 15px;background:#fff;margin:10px 0;font-weight:700}
.comment-button{background:#6599d8;border:1px solid rgba(0,0,0,.12);border-radius:4px;cursor:pointer;display:inline-block;margin:10px;padding:8px 16px;text-align:center;vertical-align:middle;white-space:nowrap}
.comment-button a{color:#fff;text-decoration:none}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;margin:0}
.comments .comments-content .inline-thread{padding:.5em 1em 0 1em}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment-replies{margin-top:1em;margin-left:40px;font-size:12px}
.comments .comments-content .comment{padding:20px!important;margin-bottom:10px;background:#fff}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .comment-content{font-size:12.5px;line-height:19px}
.comments .comments-content .comment-content{font-size:12.5px;line-height:19px;text-align:none;margin:15px 0 15px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.comments .avatar-image-container{float:left;overflow:hidden}
.comments .avatar-image-container img{width:36px}
.comments .comments-content .user{font-style:normal;font-weight:700}
.comments .comments-content .user a{color:$(comment.link.color)}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .icon.blog-author:before{content:"\f058";font-family:FontAwesome;position:relative;color:$(comment.link.color)}
.comments .comments-content .datetime{margin-left:6px;font-size:11px;float:right}
.comments .comments-content .datetime a{color:$(comment.time.color)}
.comments .comment-block{position:relative;background:$(comment.chat.background);padding:20px;margin-left:45px;border:1px solid $(comment.chat.background);border-radius:10px}
#comments ol ol .continue,.comments .comments-content .loadmore.loaded,#comments .item-control{display:none}
#addcomment,.comments .comment .comment-actions a,.comments .comments-content .loadmore a{display:inline;font-size:12px;padding:2px 8px;border-radius:5px;color:#fff;background:$(comment.button.color)}
#addcomment,.comments .continue a:hover,.comments .comment .comment-actions a:hover,.comments .comments-content .loadmore a:hover{background:$(comment.button.color.hover)}
.comments .continue a:active,.comments .comment .comment-actions a:active{position:relative;top:1px}
.comment-footer{padding:10px 0}
#addcomment{padding:10px}
#comment-editor{max-width:100%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}
.comments .comments-replybox{border:0;height:250px;width:100%}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comment-replybox-thread{margin-top:5px}
#comments .footer{padding:10px 15px}
@media(max-width:768px){#comments .footer,#commentsHolder{padding:20px 15px!important}}
@media(max-width:480px){.comments .comments-content .datetime{float:none;display:block;margin:0}.comments .comment-header{max-height:30px;overflow:hidden}.comments .comments-content .comment{position:relative}.comments .avatar-image-container{position:absolute;right:19px;top:19px;z-index:1;margin:2px;border-radius:0 10px 0 0}.comments .comment-block{margin-left:0}.comments .comments-content .comment-replies{margin-left:15px}.comments .comments-content .comment-thread ol{padding:0}}
#commentForm{padding:0 20px}

<b:include cond='data:view.isPost' name='postv2.extract.comments.blogger'/>

<b:includable id='postv2.extract.comments.blogger'>
 <div class='comments-container'>
  <b:if cond='data:post.allowComments'>
   <b:if cond='data:post.allowNewComments'>
    <b:if cond='data:post.commentSource == 1'>
     <b:comment>Google Plus Comment</b:comment>
     <b:else/>
     <b:if cond='data:post.embedCommentForm'>
      <b:include name='postv2.extract.comments.thread'/>
     </b:if>
    </b:if> 
    <b:else/>
    <b:comment>Disable From Post</b:comment>
    <b:if cond='data:post.commentSource == 1'>
     <b:comment>Disable Google Comment</b:comment>
     <b:include name='postv2.extract.comments.messages.disabled'/>
     <b:else/>
     <b:if cond='data:post.embedCommentForm'>
      <b:include name='postv2.extract.comments.thread'/>
      <b:else/>
      <b:comment>Full Comment and Popup Comment</b:comment>
      <b:include name='postv2.extract.comments.button'>
      </b:include>
     </b:if>
    </b:if>
   </b:if>
   <b:else/>
   <b:comment>Disable From Setting</b:comment>
   <b:include name='postv2.extract.comments.messages.disabled'/>
  </b:if>
 </div>
</b:includable>
<b:includable id='postv2.extract.comments.button'>
 <div class='comments' id='comments'>  
  <b:include name='postv2.extract.comments.title.messages'/>  
  <button class='comment-button'>     
   <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
    <b:message name='messages.postAComment'/>
   </a>
  </button>
 </div>
</b:includable>
<b:includable id='postv2.extract.comments.form'>      

 <b:comment>Form Comment</b:comment>
 <div aria-label='Berkomentar' id='addcomment' class='hidden' role='button'><b:message name='messages.postAComment'/></div>
 <div class="comment-form">
  <b:if cond='data:post.numberOfComments &gt; 0'>
   <script>
    var comment = true;
   </script>
   <b:else/>
   <script>
    var comment = false;
   </script>
  </b:if>
  <div id='threaded-comment-form'>
   <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
    <div class='comment-message'><data:this.messages.blogComment/></div>
   </b:if>
   <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>
   <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' width='100%'/>
  </div>
 </div>     

 <b:comment>JS For Iframe</b:comment>
 <data:post.cmtfpIframe/>
 <script type='text/javascript'>
  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
 </script>

</b:includable>
<b:includable id='postv2.extract.comments.blogger.messages'>
 <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  <div class='comment_message_inner'>
   <data:this.messages.blogComment/>
  </div>
 </b:if>
</b:includable>
<b:includable id='postv2.extract.comments.blogger.pagination'>
 <b:comment>Paging Comment</b:comment>
 <b:if cond='data:post.commentPagingRequired'>
  <div class='paging-control-container'>
   <b:if cond='data:post.hasOlderLinks'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
     <data:messages.oldest/> <data:messages.comments/> 
    </a>
   </b:if>
   <b:if cond='data:post.hasNewerLinks'>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
     <data:messages.newer/> <data:messages.comments/> 
    </a>
   </b:if>
   <span class='comment-range-text'>
    <data:post.commentRangeText/> <data:messages.comments/> 
   </span>
  </div>
 </b:if>
</b:includable>
<b:includable id='commentblock' var='cb'>
 <div class='avatar-image-container'>
  <b:if cond='data:cb.level.authorAvatarSrc != &quot;//resources.blogblog.com/img/blank.gif&quot;'>
   <img expr:alt='data:cb.level.author' expr:src='resizeImage(data:cb.level.authorAvatarSrc, 100, (1 + &quot;:&quot; + 1))' expr:title='data:cb.level.author'/>
   <b:else/>
   <img expr:alt='data:cb.level.author' expr:title='data:cb.level.author' src='//1.bp.blogspot.com/-IXFljmdm_3Y/Wbn8FFz3neI/AAAAAAAAAU0/Wlit2ColEMoPGmTI7EBYem1TQKfzUhfBACLcBGAs/s1600/dialog_character_alt_by_emperorspam-d9vuowp.png'/>
  </b:if>
 </div>
 <div class='comment-block' itemprop='comment' itemscope='' itemtype='https://schema.org/Comment'>

  <!--  -->
  <div class='comment-header'>
   <cite class='user'>
    <b:if cond='data:post.author.name == data:cb.level.author'>
     <a class='user' expr:href='data:cb.level.authorUrl' itemprop='author' itemscope='' itemtype='https://schema.org/Person' target='_blank'>
      <span itemprop='name'>
       <data:cb.level.author/>
      </span>
     </a>
     <b:else/>
     <span class='user'><data:cb.level.author/></span>
    </b:if>
   </cite>
   <b:if cond='data:post.author.name == data:cb.level.author'>
    <span class='icon user blog-author'>
    </span>
   </b:if>
   <span class='datetime secondary-text' itemprop='datePublished'>
    <a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'>
     <data:cb.level.timestamp/>
    </a>
   </span>
  </div>
  <!--  -->


  <p class='comment-content' itemprop='text'>
   <b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'>
    <b:eval expr='data:cb.level.body snippet { links: false }'/>
    <b:else/>
    <data:cb.level.body/>
   </b:if>
  </p>



  <b:if cond='data:cb.d'>
   <span class='comment-actions secondary-text'>
    <a class='comment-reply' expr:data-comment-id='data:commentLevel1.id' href='javascript:;' target='_self'><i class="fa fa-reply"></i></a>
    <span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'>
     <a expr:href='data:cb.level.deleteUrl' expr:title='data:messages.deleteComment' target='_self'><i class="fa fa-trash"></i></a>
    </span>
   </span>
  </b:if>
 </div>
</b:includable>
<b:includable id='postv2.extract.comments.thread'>
 <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>  

  <b:include name='postv2.extract.comments.title.messages'/> 

  <b:if cond='data:post.showThreadedComments'>
   <div class='comments-content'>

    <div id='comment-holder'>

     <div class='comment-thread toplevel-thread'>

      <ol id='top-ra'>


       <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>

        <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'>
         <b:include data='{level: data:commentLevel1,d: true}' name='commentblock'/>
         <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
          <b:if cond='data:commentL2.size != &quot;0&quot;'>
           <div class='comment-replies'>
            <div class='comment-thread inline-thread' expr:id='&quot;c&quot; + data:commentLevel1.id + &quot;-rt&quot;'>
             <span class='thread-toggle thread-expanded'>
              <span class='thread-arrow'>
              </span>
              <span class='thread-count'>
               <a href='javascript:;' target='_self'>Balasan</a>
              </span>
             </span>
             <ol class='thread-chrome thread-expanded'>
              <b:loop values='data:commentL2' var='commentLevel2'>
               <li class='comment' expr:id='&quot;c&quot; + data:commentLevel2.id'>
                <b:include data='{level: data:commentLevel2,d: false}' name='commentblock'/>
               </li>
              </b:loop>
             </ol>
            </div>
            <!-- <div class='continue'><span class='comment-reply' expr:data-comment-id='data:commentLevel1.id'>Balas</span></div> -->
           </div>
          </b:if>
         </b:with>
        </li>
       </b:loop>


      </ol>

     </div>

    </div>


   </div> 
  </b:if>

  <b:include name='postv2.extract.comments.blogger.pagination'/> 

  <b:if cond='data:post.allowNewComments'>
   <div class='comment-footer'>
    <b:comment>Form Comment</b:comment>
    <b:include name='postv2.extract.comments.form'/>
   </div>
  </b:if>

  <b:comment>Disable Comment Post</b:comment>
  <b:if cond='not data:post.allowNewComments and data:post.numberOfComments &gt; 0'>
   <div class='comment-disable'>
    <data:post.noNewCommentsText/>
   </div>
  </b:if> 

 </section>

 <b:comment>Comment Thread JS</b:comment>
 <b:if cond='data:post.showThreadedComments'>
  <b:include name='postv2.extract.comments.thread.js'/>
 </b:if>

</b:includable>
<b:includable id='postv2.extract.comments.thread.js'>
 <script>
  //<![CDATA[

  document.addEventListener("DOMContentLoaded", function() {
  var a = document,
  commentform = document.getElementById("comment-editor"),
  d = commentform.getAttribute("data-src");
  if (commentform.setAttribute("src", d), 1 == comment) {
  var f = document.getElementsByClassName("comment-reply"),
  c = document.getElementById("threaded-comment-form"),
  h = f.length,
  k = function(commentform, d, e, f) {
  commentform.addEventListener("click", function() {
  var c = commentform.getAttribute("data-comment-id");

  document.getElementById("c" + c).appendChild(d);
  document.getElementById("threaded-comment-form").className = 'comment-replybox-single';
  document.getElementById("addcomment").className = 'comment-reply';
  e.src = f + "&parentID=" + c
  })
  };
  for (i = 0; i < h; i++) k(f[i], c, commentform, d);
  var l = document.getElementsByClassName("comment-form")[0];
  document.getElementById("addcomment").addEventListener("click", function() {
  l.appendChild(c);
  document.getElementById("addcomment").className = 'comment-reply hidden';
  document.getElementById("threaded-comment-form").className = 'comment-replybox-thread';
  commentform.src = d
  })
  }
  }); 
  //]]>
 </script> 
</b:includable>
<b:includable id='postv2.extract.comments.messages.disabled'>
 <div class='comment-disable'>
  <b:if cond='data:post.allowComments'>
   <!-- Comment Hasben Disabled in This Page (G+) -->
   <b:elseif cond='not data:post.allowNewComments and not data:post.allowComments'/>
   <data:messages.onlyTeamMembersCanComment/>
  </b:if>
 </div>
</b:includable>
<b:includable id='postv2.extract.comments.title.messages'>
 <h2 class='comments-title'>
  <b:if cond='data:post.numberOfComments &gt; 0'>
   <b:message name='messages.numberOfComments'>
    <b:param expr:value='data:post.numberOfComments' name='numComments'/>
   </b:message>
   <b:else/>
   <data:messages.comments/>
  </b:if>
 </h2>
</b:includable>

Sumber: https://kodeinblogger.kurteyki.com/2019/08/post-comment-contempo-extract-v2.html