Tool Konversi Kode Di Threaded Comment Hack

Tool Konversi Kode  berguna untuk mengkonversi kode yang masih "telanjang" menjadi kode yang sudah ditutupi sesuatu agar nampak di komentar.

Coba deh kalian komentar langsung make kode biasa. Bisa gak? :p Saya yakin tidak! Karena itulah anda harus mengkonversikannya dulu menggunakan tool konversi kode ini.




Baca juga Threaded Comment Hack Valid HTML Ala Kang Ismet

Tool ini sangatlah user friendly ( menurut saya ) karena tampilannya yang bersih juga karena manfaatnya yang besar.

Berikut adalah Cara Membuat Tool Konversi Kode Di Threaded Comment Hack

1. Copy CSS Berikut

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

Simpan javascript berikut di atas </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. HTML

Simpan kode HTML ini persis di bawah kode.

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

Biasanya kode tersebut ada 4 buah, simpan di kode yang nomer 2 dan 4.

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

4. Simpan template.

Semoga tool konversi kode ini bermanfaat :)

Source : http://www.kompiajaib.com/2014/01/membuat-tool-konversi-kode-di-atas.html

Tweet