Show And Hide Emoticon On Threaded Comment Hack

Emoticon On Threaded Comment Hack
Sharing kali ini adalah membuat show and hide emoticon pada threaded comment hack bagi Anda yang sedang menggunakannya. Bagi Anda yang sedang mencoba untuk validasi HTML5, saya sarankan untuk menggunakan threaded comment hack untuk mengurangi error validasi HTML5 di daerah postingan. Karena kita tahu bahwa threaded comment bawaan blogger menyumbangkan lumayan banyak error pada validasi HTML5. 

Untuk tutorial pemasangan threaded comment hack ini bisa Anda kunjungi blognya Kang Ismet. Nah bagi Anda yang sudah memasangnya tentu sudah tahu bahwa threaded comment hack ini sudah dilengkapi dengan emoticon atau smiley. Namun kebanyakan pengguna akhirnya menyembunyikan icon emoticon-nya, mungkin alasannya sama dengan saya yaitu tampilan icon emoticon ini mengganggu pemandangan hehehehe...

Sebenarnya icon emoticon ini sangat berguna bagi mereka yang berkomentar dan belum paham kode-kode emoticon-nya. Untuk kita kita bisa menambahkan tombol show and hide untuk icon emoticon ini agar tidak mengganggu pemandangan namun bisa dimunculkan untuk melihat kode-kodenya.


Nah bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Bagi Anda yang sudah menyembunyikan icon emoticon, silahkan hapus kode CSS yang menyembunyikan emoticonnya. Biasanya seperti ini:


.comment_emo_list {display:none}

Langkah Kedua

Silahkan hapus juga kode html pemanggilnya yang berada di Comment_form. Silahkan cari kode di bawah ini dan hapus kode <div class='comment_emo_list'/>


  <div class='comment_form'>                    
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>    
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-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' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

Langkah Ketiga

Tambahkan kode di bawah ini pada daerah Comment-form. Cari kode <b:includable id='comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.


<div style='margin-bottom:10px'>
<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide Smiley&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show Smiley&apos;; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
  <div class='comment_emo_list'/>
</div>
</div>
</div>
</div>

Langkah Keempat

Tambahkan kode di bawah ini pada daerah threaded-comment-form. Cari kode <b:includable id='threaded-comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.


<div style='margin-bottom:10px'>
<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide Smiley&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show Smiley&apos;; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
  <div class='comment_emo_list'/>
</div>
</div>
</div>
</div>

Langkah Kelima

Silahkan save template Anda dan lihat penampakannya pada postingan blog Anda.

Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments