SHOW AND HIDE KONVERSI TOOL DAN EMOTICON THREADED COMMENT HACK

Unknown

Trik Blog, Tutorial Blog

5 Mar 2014

2 Komentar

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

Beberapa waktu yang lalu saya 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 jika Anda gabungkan kedua trik di atas, maka ada yang tidak berfungsi biasanya show and hide emoticon tidak bisa dibuka karena script yang digunakan bentrok. Untuk mengatasinya kita hanya merubah script show and hide emoticon dengan show and hide konversi tool namun kita meggunakan class baru untuk emoticon-nya agar bisa berfungsi.

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

Langkah Pertama

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

.comment_emo_list {display:none}

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

Langkah Kedua

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

Silahkan cari kelompok kode seperti di bawah ini kemudian hapus kode 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 menggunakan trik untuk show and hide emoticon sebelumnya pasti sudah melakukan kedua langkah di atas, silahkan lewati kedua langkah di atas tersebut.

Langkah Ketiga

Silahkan copy kode 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 menggunakan trik untuk membuat konversi kode 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 menggunakan kode emo sesuai dengan kode di atas seperti a.emo-button, #emo-box, dan #hide-emo

Langkah Keempat

Simpan kode HTML di bawah ini persis di bawah kode

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

Biasanya kode di atas ada 2 buah, simpan kode HTML-nya di bawah kedua kode 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 kode di sini lalu 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 menggunakan show and hide konversi tool seperti pada postingan sebelumnya, silahkan tambahkan hanya kode HTML untuk emoticon-nya saja dan taruh di bawah kode 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 menggunakan show and hide emoticon seperti pada postingan sebelumnya silahkan hapus kode 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....