Menyimpan Tombol Konversi Arahan Dan Emoticon Di Kotak Pesan Komentar
Postingan ini dibentuk untuk menambah variasi penempatan tombol konversi arahan dan tombol emoticon pada threaded comment hack. Pada postingan sebelumnya kita menempatkan tombol konversi arahan dan tombol emoticon sempurna di atas editor komentar dengan bentuk tombol melebar dan berjejer ke bawah. Nah kali ini kita akan menempatkan tombol konversi arahan dan tombol emoticon ini di dalam kotak pesan komentar dengan posisi berjejer ke samping.
Untuk menciptakan tombol konversi arahan dan tombol emoticon ini intinya sama dengan cara menciptakan show and hide konversi tool dan emoticon threaded comment hack yang kemarin saya share. Disini kita hanya merubah sedikit pada arahan 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 arahan 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 biar saat tombol diaktifkan tidak menjadi berjejer ke bawah tapi tetap berjejer ke samping.
Silahkan lakukan perubahan pada CSS tombolnya menyerupai 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 menyerupai 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 arahan dan show and hide emoticon-nya dan arahan div menjadi span biar tidak error pada validasi html5 alasannya yakni ini akan disimpan di dalam arahan <p> menyerupai di bawah ini.
Kode onclick event untuk konversi arahan sebelumnya menyerupai di bawah ini.
<div id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='block';document.getElementById('hide-konversi').style.display='block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></div><div id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='block''>Hide Konversi Kode</a></div> Dan sehabis dirubah menjadi menyerupai ini ( kode div menjadi span dan arahan display='block' menjadi display='inline-block' )
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='inline-block';document.getElementById('hide-konversi').style.display='inline-block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='inline-block''>Hide Konversi Kode</a></span> Lakukan hal yang sama untuk script onclick event untuk emoticonnya.
Kemudian pindahkan (hanya arahan script onclick event untuk konversi dan emoticon saja, untuk arahan pemanggil konversi dan emoticon tetap pada posisi semula) posisinya dari bawah kotak pesan komentar ke dalam kotak pesan komentar. Kode kotak pesan komentar ini yakni <p><data:blogCommentMessage/></p> maka simpanlah di atas penutupnya ( </p> ) menyerupai tampak di bawah ini.
Sebelumnya tampak menyerupai di bawah ini
<p><data:blogCommentMessage/>
</p>
<div id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='block';document.getElementById('hide-konversi').style.display='block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></div><div id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='block''>Hide Konversi Kode</a></div>
<div id='konversi-box'>
<textarea id='codes' placeholder='Tulis/paste arahan di sini kemudian klik 'Konversi'' 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('emo-box').style.display='block';document.getElementById('hide-emo').style.display='block';document.getElementById('show-emo').style.display='none''>Show Emoticon</a></div><div id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='block''>Hide Emoticon</a></div>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>
Setelah dirubah dan dipindahkan menyerupai di bawah ini
<p><data:blogCommentMessage/>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='inline-block';document.getElementById('hide-konversi').style.display='inline-block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='inline-block''>Hide Konversi Kode</a></span>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none''>Show Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block''>Hide Emoticon</a></span>
</p>
<div id='konversi-box'>
<textarea id='codes' placeholder='Tulis/paste arahan di sini kemudian klik 'Konversi'' 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 arahan kedua juga.
Silahkan baca dengan teliti dan pelajari... Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Menyimpan Tombol Konversi Arahan Dan Emoticon Di Kotak Pesan Komentar"
Posting Komentar