Simple Show Hide Komentar

Simple Show Hide Komentar,show hide komentar sudah sering kita melihatnya di blog sobat apabila kita berkunjung pasti bisa menemukannya.Namun kebanyakan sho hide pada kotak komentar didominasi denga css Jquery,berbeda dengan show hide yang saya akan bahas di sini.
Disini saya akan membagikan tips cara membuat show hide dengan cara merubah javascript atau menambah script di dalam html blog.

Memang pada dasarnya show hide dengan jquery lebih menarik dan sangat bagus untuk menghias blog sobat,namun sobat tau sendirikhan,mungkin juga akan menambah loading blog bertambah.
Nah biar lebih gamblang lagi,atau mengetahui cara membuat simple show hide yang ini yu kita ikuti saja tutorialnya di bawah.

Pertama, masuk dashboard, lalu Tata Letak, kemudian pilih tab Edit HTML.
Lalu centang tulisan Expand Widget Templates, setelah itu cari kode </head>.
Setelah ketemu letakkan kode di bawah ini tepat di atas kode </head>.

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

Setelah itu cari kode berikut:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'></span><br /><span style="color: red;"><br /></span><b:loop values='data:post.comments' var='comment'><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br />          <b:if cond='data:comment.favicon'><br />            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br />          </b:if><br />          <a expr:name='data:comment.anchorName'/><br />          <b:if cond='data:blog.enabledCommentProfileImages'><br />            <data:comment.authorAvatarImage/><br />          </b:if><br />          <b:if cond='data:comment.authorUrl'><br />            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />          <b:else/><br />            <data:comment.author/><br />          </b:if><br />          <data:commentPostedByMsg/><br />        </dt><br />        <dd class='comment-body'><br />          <b:if cond='data:comment.isDeleted'><br />            <span class='deleted-comment'><data:comment.body/></span><br />          <b:else/><br />            <p><data:comment.body/></p><br />          </b:if><br />        </dd><br />        <dd class='comment-footer'><br />          <span class='comment-timestamp'><br />            <a expr:href='data:comment.url' title='comment permalink'><br />              <data:comment.timestamp/><br />            </a><br />            <b:include data='comment' name='commentDeleteIcon'/><br />          </span><br />        </dd><br />      </b:loop><br /></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'><span style="color: red;">Show/Hide Comments</span></a><br /><br /><div id='toggleText' style='display: none;'><br /><dl expr:class='data:post.avatarIndentClass' id='comments-block'><br /><b:loop values='data:post.comments' var='comment'><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br /> <b:if cond='data:comment.favicon'><br />   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /> </b:if><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:blog.enabledCommentProfileImages'><br />   <data:comment.authorAvatarImage/><br /> </b:if><br /> <b:if cond='data:comment.authorUrl'><br />   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br />   <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /></dt><br /><dd class='comment-body'><br /> <b:if cond='data:comment.isDeleted'><br />   <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br />   <p><data:comment.body/></p><br /> </b:if><br /></dd><br /><dd class='comment-footer'><br /> <span class='comment-timestamp'><br />   <a expr:href='data:comment.url' title='comment permalink'><br />     <data:comment.timestamp/><br />   </a><br />   <b:include data='comment' name='commentDeleteIcon'/><br /> </span><br /></dd><br /></b:loop><br /></dl><br /></div>

Up-date:untuk mengcopy script tekan CTRL+c untuk mempaste CTRL+v
Kalau sudah selesai coba sobat pratinjau dulu,kalau sudah tidak ada erorr tinggal di simpan saja.
Catatan:silahkan anda ganti tulisan yang berwarna merah,nah sobat itulah caranya membuat simple show hide komentar kali ini mudah-mudahan bermanfaat terima kasih.
Sumber


Ufdate:
Sekalian saja sob bagi yang membutuhkan kode scroll silahkan kopas saja kodenya di bawah.
( Kode scroll )

<div style="overflow:auto;width:220px;height:100px;padding:10px;border:1px solid #999">simpan kode yang mau anda pasang di sini </div>
Mudah-mudahan bermanfaat.