Show And Hide Konversi Tool Dan Emoticon Threaded Comment Hack

Kali ini masih berbicara dengan show and hide atau dalam bahasa Indonesia berarti menampilkan dan menyembunyikan ialah show and hide konversi tool dan emoticon di atas editor komentar pada threaded comment hack.

Beberapa waktu yang kemudian aku telah men-share show and hide emoticon dan show and hide konversi tool di atas editor komentar.

Baca lagi:
Show And Hide Emoticon On Threaded Comment Hack
Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack

Namun jikalau Anda gabungkan kedua trik di atas, maka ada yang tidak berfungsi biasanya show and hide emoticon tidak dapat dibuka sebab script yang dipakai bentrok. Untuk mengatasinya kita hanya merubah script show and hide emoticon dengan show and hide konversi tool namun kita meggunakan class gres untuk emoticon-nya biar dapat berfungsi.

Nah bagi Anda yang ingin memakai keduanya silahkan copy dan pelajari kode-kodenya di bawah ini.

Langkah Pertama

Jika Anda sebelumnya sudah menyembunyikan emoticon-nya, silahkan hapus isyarat CSS yang menyembunyikan emoticon-nya menyerupai di bawah ini.

 .comment_emo_list {display:none}

Jika sudah tidak ada isyarat tersebut di edit HTML blog Anda silahkan lanjut ke langkah kedua di bawah ini.

Langkah Kedua

Silahkan hapus isyarat pemanggil emoticon-nya yang ada di Comment_Form menyerupai ini <div class='comment_emo_list'/>

Silahkan cari kelompok isyarat menyerupai di bawah ini kemudian hapus isyarat di atas.

 <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>

Bagi yang sudah memakai trik untuk show and hide emoticon sebelumnya niscaya sudah melaksanakan kedua langkah di atas, silahkan lewati kedua langkah di atas tersebut.

Langkah Ketiga

Silahkan copy isyarat CSS di bawah ini

 a.konversi-button,a.emo-button{border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin-bottom:10px;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}
 #konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
 #konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
 .checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
 #codes{border:1px solid #333;width:98%;height:200px;display:block;background-color:#ccc;border-radius:3px;font:normal 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px}
 #codes:focus{background-color:#fff;color:#000;border:1px solid #333}
 .button-group{float:right;text-align:left;margin:0 auto}
 button,button[disabled]:active{font-size:12px;font-family:Arial;font-weight:normal;border-radius:3px;border:1px solid #49a5bf;padding:3px 10px;text-decoration:none;background:linear-gradient(to bottom, #93cede 0%, #75bdd1 41%, #49a5bf 100%);color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #528ecc;box-shadow:inset 1px 1px 0px 0px #bbdaf7;cursor:pointer}
 button:hover{color:#000}
 button:active{color:#000}
 button[disabled],button[disabled]:active{color:#000;cursor:default}
 #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}

Untuk yang sudah memakai trik untuk menciptakan konversi isyarat di atas editor komentar pada postingan sebelumnya hanya tinggal menambahkan class untuk emoticon-nya saja pada CSS konversi tool sebelumnya. Silahkan tambahkan class dan id yang memakai isyarat emo sesuai dengan isyarat di atas menyerupai a.emo-button, #emo-box, dan #hide-emo

Langkah Keempat

Simpan isyarat HTML di bawah ini persis di bawah kode

 <div id='threaded-comment-form'>
       <p><data:blogCommentMessage/>
          </p>

Biasanya isyarat di atas ada 2 buah, simpan isyarat HTML-nya di bawah kedua isyarat tersebut di atas.

 <div id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></div><div id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;block&apos;'>Hide Konversi Kode</a></div>
 <div id='konversi-box'>
     <textarea id='codes' placeholder='Tulis/paste isyarat di sini kemudian klik &apos;Konversi&apos;' spellcheck='false'/>
 <span class='button-group'>
 <button id='cvrt' onclick='cdConvert();this.disabled = true;'>Konversi</button>
 <button onclick='cdClear();'>Bersihkan</button>
 </span>
 <span class='checkbox'>
 <input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
 </div>
 
 <div id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></div><div id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;block&apos;'>Hide Emoticon</a></div>
 <div id='emo-box'>
   <div class='comment_emo_list'/>
 </div>

Bagi yang sudah memakai show and hide konversi tool menyerupai pada postingan sebelumnya, silahkan tambahkan hanya isyarat HTML untuk emoticon-nya saja dan taruh di bawah isyarat html konversi kode. Kode HTML untuk emoticon yaitu 

 <div id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></div><div id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;block&apos;'>Hide Emoticon</a></div>
 <div id='emo-box'>
   <div class='comment_emo_list'/>
 </div>

Bagi yang sudah memakai show and hide emoticon menyerupai pada postingan sebelumnya silahkan hapus isyarat HTML untuk emoticon sebelumnya.

Untuk javascript konversi kodenya silahkan copy dari postingan Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack pada link di atas.

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post