Menyimpan Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar

Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar
Postingan ini dibuat untuk menambah variasi penempatan tombol konversi kode dan tombol emoticon pada threaded comment hack. Pada postingan sebelumnya kita menempatkan tombol konversi kode dan tombol emoticon tepat di atas editor komentar dengan bentuk tombol melebar dan berjejer ke bawah. Nah kali ini kita akan menempatkan tombol konversi kode dan tombol emoticon ini di dalam kotak pesan komentar dengan posisi berjejer ke samping.

Untuk membuat tombol konversi kode dan tombol emoticon ini pada dasarnya sama dengan cara membuat show and hide konversi tool dan emoticon threaded comment hack yang kemarin saya share. Disini kita hanya merubah sedikit pada kode onclick event dan memindahkannya ke dalam kotak pesan komentar. Untuk pemasangannya silahkan lihat lagi postingan show and hide konversi tool dan emoticon threaded comment hack di link di bawah ini.


Nah untuk memindahkan tombol konversi kode dan tombol emoticon dari atas editor komentar ke dalam kotak pesan komentar, kita hanya merubah kode display:block menjadi display:inline-block pada CSS tombolnya dan pada script onclick event-nya. Ini dilakukan agar ketika tombol diaktifkan tidak menjadi berjejer ke bawah tapi tetap berjejer ke samping.

Silahkan lakukan perubahan pada CSS tombolnya seperti 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}

Menjadi seperti ini ( merubah kode display:block menjadi display:inline-block )

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:inline-block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center}

Kemudian merubah kode display:block menjadi display:inline-block pada script onclick event untuk show and hide konversi kode dan show and hide emoticon-nya dan kode div menjadi span agar tidak error pada validasi html5 karena ini akan disimpan di dalam kode <p> seperti di bawah ini.

Kode onclick event untuk konversi kode sebelumnya seperti di bawah ini.

<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>
Dan setelah dirubah menjadi seperti ini ( kode div menjadi span dan kode display=&apos;block&apos; menjadi display=&apos;inline-block&apos; )

<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></span><span 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;inline-block&apos;'>Hide Konversi Kode</a></span>
Lakukan hal yang sama untuk script onclick event untuk emoticonnya.

Kemudian pindahkan (hanya kode script onclick event untuk konversi dan emoticon saja, untuk kode pemanggil konversi dan emoticon tetap pada posisi semula) posisinya dari bawah kotak pesan komentar ke dalam kotak pesan komentar. Kode kotak pesan komentar ini adalah <p><data:blogCommentMessage/></p> maka simpanlah di atas penutupnya ( </p> ) seperti tampak di bawah ini.

Sebelumnya tampak seperti di bawah ini

<p><data:blogCommentMessage/>
  </p>
<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>

Setelah dirubah dan dipindahkan seperti di bawah ini

<p><data:blogCommentMessage/>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></span><span 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;inline-block&apos;'>Hide Konversi Kode</a></span>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></span><span 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;inline-block&apos;'>Hide Emoticon</a></span>
  </p>
<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='emo-box'> 
  <div class='comment_emo_list'/>
</div>

Lakukan perubahan ini pada kelompok kode kedua juga.

Silahkan baca dengan teliti dan pelajari... 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