Coppas Pedia

Cara Membuat Kotak Komentar Gaya Threaded

#comments h4 {font-size: 18px;font-weight: normal;margin: 20px 0}
.cm_wrap {clear: both;margin-bottom: 10px;float: right;width: 100%}
.cm_head {margin: 0;width:60px;float: left}
.cm_avatar {margin: 0;vertical-align: middle;outline: 1px solid #fff;border: 1px solid #ddd;padding: 3px;background-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5Jj2jHl73KMCOmZxyorvixiQQUaAnUK2SR3rIUC2L6PUNN7hg78VbKuIbTIVaAtKtGKSOV_XLm7eh2LDMncWVhDLO3cmJGCG1ThXJ0Wug1wQFtcE4eiVek9HpU7U3HaHRZDmrNBMUNQ/s1600/author_comment.jpg);background-position:center;background-repeat:no-repeat;width: 35px;height: 35px}
.cm_avatar_a {margin: 0;vertical-align: middle;border: 1px solid #ddd;padding: 3px;
background:#c6e5f7;background-position:center;background-repeat:no-repeat;width: 35px;height: 35px}
.cm_reply {padding-top: 5px}
.cm_reply a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;
-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif}
.cm_reply a:hover {text-decoration: none !important;;background: #ccc;;background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}
.cm_entry_a {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}
.cm_arrow {display: block;width: 9px;height: 18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJK7vVtkHxEsNYE_veY9RzS9o4OaLmIP6fXKggkp64W30vI7F8ayXqdRnvEk7UD67Y3eO8rwNLaVACBhGU_tq8Wgk47p6HtYMEN5N4AADgRaacvzAe4rn4mTIRtOXqXgwFgNreQmZsU8/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px}
.cm_info {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #F4F4F4;padding: 5px}
.cm_info_a {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #dff0fa;
padding: 5px}
.cm_name {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: bold;float: left}
.cm_name_a {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: 250;float: left}
.cm_date {font-size: 10px;color: #999;text-decoration:none;float: right}
.cm_date_a {font-size: 10px;color: #2D5E7B;text-decoration:none;float: right;
padding-top:5px}
.cm_entry p {padding: 5px;line-height:1.4em;clear: both;border: thin solid #E6E6E6;background-color: #F4F4F4;font-size: 13px;color: #333;word-wrap:break-word}
.cm_entry_a p {padding: 5px;clear: both;border: thin solid #E6E6E6;background-color:  #dff0fa;font-size: 13px;color: #333;word-wrap:break-word}
.cm_pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold}
.cm_pagenavi a {color: #666;text-decoration: none;padding:10px}
.cm_pagenavi a:hover {text-decoration: underline}
.cm_pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0}
.owner-Body p{margin-bottom: 5px;border: thin solid #E6E6E6;background:#EFF5FB;padding: 5px}

<script src='http://miscah.googlecode.com/files/comment-replay.js' type='text/javascript'/>

<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>                       
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=90113338581622&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>

<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>                                 
</div>                             
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>

</div>
</div>
</div>
</b:if>             
</b:loop>
</div>

<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</b:if>
</div>
</b:includable>