TOOL KONVERSI KODE DI ATAS EDITOR KOMENTAR THREADED

Unknown

Trik Blog, Tutorial Blog

5 Mar 2014

Belum ada komentar

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

Nah kali ini mari kita belajar membuat tool konversi kode ini dan disimpan di atas editor komentar.

Sebenarnya Kompi Ajaib telah menggunakan tool konersi kode ini, namun menggunakan trik pop up sehingga penggunaannya kurang nyaman karena halaman blog terganggu dengan pop up tool ini. Nah dengan menggunakan trik ini, penggunaan tool konversi ini saya rasa lebih nyaman karena bisa langsung dibuka di halaman yang sama tepatnya di atas editor komentar.

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

Untuk demonya silahkan lihat pada konversi kode 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 kode 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 kode </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 kode HTML ini persis di bawah kode ini.

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

Biasanya kode di atas ada dua buah, simpan di bawah kedua kode 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 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>

Inspirasi ini saya dapat dari blog +Kang Ismet  namun saya coba dengan trik berbeda. Selamat mencoba....