Membuat Tool Konversi Aba-Aba Di Atas Editor Komentar Threaded Comment Hack

Tool Konversi Kode di sini berfungsi untuk mengkonversi kode-kode terlarang untuk komentar blog. Ini biasanya dipakai oleh blog-blog yang menyajikan tutorial blogger, sehingga penjelasan-penjelasan tutorial pada komentarnya sanggup menyertakan kode-kodenya. 

Nah kali ini mari kita berguru menciptakan tool konversi instruksi ini dan disimpan di atas editor komentar.

Sebenarnya Kompi Ajaib telah memakai tool konersi instruksi ini, namun memakai trik pop up sehingga penggunaannya kurang nyaman alasannya ialah halaman blog terganggu dengan pop up tool ini. Nah dengan memakai trik ini, penggunaan tool konversi ini aku rasa lebih nyaman alasannya ialah sanggup eksklusif dibuka di halaman yang sama tepatnya di atas editor komentar.

Berbeda dengan trik pop up yang memakai link eksternal hosting file xml tool konversi-nya, pada kali ini kita akan eksklusif menyimpan css dan javascript-nya serta HTML-nya di edit HTML blog. Namun ada sedikit perubahan semoga sanggup valid HTML5 dan CSS3. Dan kita gunakan onclick event pada tombolnya untuk menampilkan dan menyembunyikan tool-nya.

Untuk demonya silahkan lihat pada konversi instruksi di blog ini, dan untuk validasi HTML5 dan CSS3 silahkan test halaman ini.

Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini. Untuk modifikasi tampilannya silahkan atur pada instruksi CSS-nya.

1. Kode CSS

 a.konversi-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 {display:none}
 #konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:15px;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{background-color:#464646;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#fff;border:none;border-radius:3px;cursor:pointer;padding:5px 10px}
 button:hover{background-color:#A8A8A8;color:#000}
 button:active{background-color:#A8A8A8;color:#000}
 button[disabled],button[disabled]:active{background-color:#A8A8A8;color:#000;cursor:default}
 #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}

2. Kode Javascript

Simpan javascriptnya di atas instruksi </body>

 function cdClear() {
     var wtarea = document.getElementById('codes');
     wtarea.value = '';
     wtarea.focus();
     document.getElementById('cvrt').disabled = false;
 }
 function cdConvert() {
     var ctarea = document.getElementById('codes'),
         cv = ctarea.value,
         opt1 = document.getElementById('opt1'),
         opt2 = document.getElementById('opt2'),
         opt3 = document.getElementById('opt3'),
         opt4 = document.getElementById('opt4'),
         opt5 = document.getElementById('opt5');
     cv = cv.replace(/\t/g, "    ");
     if (opt1.checked) cv = cv.replace(/&/g, "&");
     if (opt2.checked) cv = cv.replace(/'/g, "'");
     if (opt3.checked) cv = cv.replace(/"/g, """);
     if (opt4.checked) cv = cv.replace(/</g, "&lt;");
     if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
     if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
         cv = cv.replace(/^/, "<i rel=\"pre\">");
     } else {
         cv = cv.replace(/^/, "<i rel=\"code\">");
     }
     cv = cv.replace(/$/, "</i>");
     ctarea.value = cv;
     ctarea.focus();
     ctarea.select();
 };

3. Kode HTML

Simpan instruksi HTML ini persis di bawah instruksi ini.

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

Biasanya instruksi di atas ada dua buah, simpan di bawah kedua instruksi tersebut.

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

Inspirasi ini aku sanggup dari blog +Kang Ismet  namun aku coba dengan trik berbeda. Selamat mencoba....

Inspirasi: http://blog.kangismet.net/

Sumber https://www.kompiajaib.com/

Share this post