Cara membuat tool HTML converter

Cara Membuat Tool “HTML CONVERTER” – Cara Baru Berbagi Online. Dalam melakukan Editing HTML pada Template blogspot, tentunya kita sudah nggak asing lagi dengan Tool yang satu ini, yaitu PARSE Tool atau HTML Converter.  Tool HTML Converter ini berfungsi untuk membantu kita agar script atau code dari HTML yang kita masukkan ke HTML Template kita, menjadi Valid. Bisa juga agar script atau code dari HTML yang kita masukkan ke area-terlarang, misalnya kotak komentar saat kita berkunjung ke sebuah Blog/Web. Saat ini hampir semua blogger memasang Tool HTML Converter atau HTML PARSER ini pada web/Blog masing-masing. Mengingat keberadaannya yang sangat penting, maka saya juga memutuskan untuk memasang tool ini. Tool ini saya akan pergunakan untuk konversi kode bila saya mempunyai pertanyaan yang harus menggunakan script atau HTML code, pada kotak komentar atau kotak pertanyaan pada sebuah forum dari blog yang saya ikuti. Selain itu jugaa sebagai dokumentasi yang berguna bila saya akan memasang HTML Converter pada blog baru saya dimasa mendatang.
Tool HTML Converter ala Cara Baru Berbagi Online
Dan barangkali ada sobat blogger yang belum memasang HTML Converter ala saya ini, berikut Tool HTML Converter ala Cara Baru Berbagi Online. 

1. Buat Post pada Static-Page, dan Silahkan salin Css dan Skrip di bawah ini dan paste dalam post sobat, dalam Mode HTML bukan Compose.
 
<html><head>
<title>HTML Codes Converter modified by Marlon Alamo</title>
<link href="http://i1321.photobucket.com/albums/u555/MarlonBooketpot/kanjiBHT16x16_zps582fa0a0.jpg" rel="shortcut icon" type="image/x-icon"></link>

<style type="text/css">
body{background-color:#BCAC9B;font:normal 11px Arial,Tahoma,Verdana,Sans-Serif;color:#0B2C7A;padding:10px}
p{margin-top:10px}
code{color:#b0130d}
#codes{border:1px solid #0B2C7A;width:97%;height:200px;display:block;background-color:#ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:normal 12px 'Courier New',Monospace;margin:10px 0;padding:5px}
#codes:focus{background-color:#fff;color:#000;border:1px solid #333}
.button-group{text-align:left;margin:0 auto}
button,button[disabled]:active{background-color:#D35822;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#fff;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:pointer;padding:5px 10px}
button:hover{background-color:#D35822;color:#FFF}
button:active{background-color:#E02424;color:#000}
button[disabled],button[disabled]:active{background-color:#666;color:#fff;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5,#opt6,#opt7,#opt8{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
</style>

</head>

<body>
<textarea id="codes" placeholder="please
Click on the 'Clear All' first, Then Paste Code here and then click 'Convert'
, Enjoy the code changes from 'Cara Baru Berbagi Online' ....." spellcheck="false"></textarea>
<div class="button-group">
<button disabled="disabled" id="cvrt" onclick="cdConvert();this.disabled = true;">CONVERT</button>
<button onclick="cdClear();">CLEAR ALL</button>
</div>
<input checked="true" id="opt1" type="checkbox" />Convert <code>"</code> becoming <code>&amp;quot;</code><br />
<input checked="true" id="opt2" type="checkbox" />Convert <code>'</code> becoming <code>&amp;#039;</code><br />
<input checked="true" id="opt3" type="checkbox" />Convert <code>&lt;</code> becoming <code>&amp;lt;</code><br />
<input checked="true" id="opt4" type="checkbox" />Convert <code>&gt;</code> becoming <code>&amp;gt;</code><br />
<input id="opt5" type="checkbox" />Convert <code>&amp;</code> becoming <code>&amp;amp;</code><br />
<input id="opt6" type="checkbox" />Convert <code>&#177;</code> becoming <code>&amp;plusmn;</code><br />
<input id="opt7" type="checkbox" />Convert <code>&#169;</code> becoming <code>&amp;copy;</code><br />
<input id="opt8" type="checkbox" />Convert <code>&#174;</code> becoming <code>&amp;reg;</code>
<script type="text/javascript">
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'),
            opt6 = document.getElementById('opt6'),
        opt7 = document.getElementById('opt7');
   opt8 = document.getElementById('opt8');
    if (opt1.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/</g, "&lt;");
    if (opt4.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt5.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt6.checked) cv = cv.replace(/&#177/g, "&plusmn;");
    if (opt7.checked) cv = cv.replace(/&#169/g, "&copy;");
    if (opt8.checked) cv = cv.replace(/&#174/g, "&reg;");
    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();
};
</script>

</body>
</html>


2. Silahkan tempatkan kode pemanggil ini sesuai dengan keperluan, bisa di mana saja baik itu di Sidebar ,bagian Menu atau di taruh di bagian atas form komentar .

<a href="index.php" onclick="return popitup('http://www.marlonalamo.com/p/html-converter.html')" title=" HTML Converter "><button> HTML Converter</button></a>

Semoga bisa membantu memudahkan saya dan sobat ddidalam mengkonversi HTML Codes. Salam Cara Baru Berbagi Online.


Terima kasih sobat sudah berkunjung, dan :
1. Berkomentar dengan arif dan sopan
2. Tidak memasukkan link aktif dalam form komentar
3. Berkomentar relevan dengan artikel.
4. Komentar kasar, ada unsur Sara,pornografi dianggap Spam, dan langsung dihapus.
5. Marilah kita menjadi blogger yang saling memberi manfaat, cerdas dan beretika.
6. Saya akan coba merespon komentar baru secepatnya.
7. Harap berkomentar dengan bahasa yang baku tanpa singkatan.
8. Jangan minta izin untuk copy paste, kalau artikel dirasa bermanfaat dan ingin berbagi silahkan ditulis dalam narasi anda sendiri.


Out Of Topic