Cara membuat show hide pada kotak komentar di blogger

Salam persahabatan, sudah lama trik blogger tidak posting tentang tutorial blogger, kali ini trik blogger akan memberikan tutorial blogger membuat show hide komentar,.untuk lebih jelasnya mari kita ikuti tutorial berikut ini :


Pertama, pergilah ke Dashboard, lalu Tata Letak, kemudian pilih tab Edit HTML.
Lalu contreng check box tulisan Expand Widget Templates, setelah cari kode berikut:

</head>

Setelah ketemu letakkan kode di bawah ini tepat di atas </head>

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Comments";
}
}
</script>

Setelah itu cari kode berikut:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
          <b:if cond='data:comment.favicon'>
            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
          </b:if>
          <a expr:name='data:comment.anchorName'/>
          <b:if cond='data:blog.enabledCommentProfileImages'>
            <data:comment.authorAvatarImage/>
          </b:if>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
          <data:commentPostedByMsg/>
        </dt>
        <dd 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>
        </dd>
        <dd class='comment-footer'>
          <span class='comment-timestamp'>
            <a expr:href='data:comment.url' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
      </b:loop>

</dl>

Untuk mempermudah pencarian kode gunakan Ctrl+F pada keyboard sobat.

Jika sudah ketemu, gantilah kode di atas dengan kode dibawah ini :

<a href='javascript:toggle();' id='displayText'>Show/Hide Comments</a>

<div id='toggleText' style='display: none;'>


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
 </b:if>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
 </b:if>
 <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
   <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
</dt>
<dd 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>
</dd>
<dd class='comment-footer'>
 <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
     <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
 </span>
</dd>
</b:loop>

</dl>


</div>

Setelah selesai simpanlah template sobat dan lihat hasilnya.

Untuk tulisan Show or Hide Comments bisa sobat ganti dengan tulisan sesuai selera sobat

Selamat mencoba, semoga bermanfaat

Description: Memasang Show / Hide Komentar di Blogspot
Rating: 4.5