Show And Hide Emoticon On Threaded Comment Hack

Sharing kali ini yaitu menciptakan show and hide emoticon pada threaded comment hack bagi Anda yang sedang menggunakannya. Bagi Anda yang sedang mencoba untuk validasi HTML5, aku sarankan untuk memakai threaded comment hack untuk mengurangi error validasi HTML5 di kawasan postingan. Karena kita tahu bahwa threaded comment bawaan blogger menyumbangkan tidak mengecewakan banyak error pada validasi HTML5. 

Untuk tutorial pemasangan threaded comment hack ini dapat 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 jadinya menyembunyikan icon emoticon-nya, mungkin sebab sama dengan aku yaitu tampilan icon emoticon ini mengganggu pemandangan hehehehe...

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

DEMO

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

Langkah Pertama

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

 .comment_emo_list {display:none}

Langkah Kedua

Silahkan hapus juga isyarat html pemanggilnya yang berada di Comment_form. Silahkan cari isyarat 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 isyarat di bawah ini pada kawasan Comment-form. Cari kode <b:includable id='comment-form' var='post'> lalu scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan isyarat 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 isyarat di bawah ini pada kawasan threaded-comment-form. Cari isyarat <b:includable id='threaded-comment-form' var='post'> lalu scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan isyarat 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...

Sumber https://www.kompiajaib.com/

Share this post