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.


Bagikan Artikel ini via :
Share on fb Tweet Share on G+

18 Responses to "Cara membuat tool HTML converter"

  1. Salam.. Apa kabar Kang @Marlona mugia nuju aya Ginanjar kawileujengan wae nya Kang..? Mipit amit abi Idzin simak artikel
    Akang,. Tong aral subaha nya Kang upami abi sering koment
    sareng na deui hapunten bilih paripaos abi teu raos kana manah Akang.

    Sae nikh artikel nya,,. sangat bermanfaat buat saya
    Juga buat blogging yang lain,. mudah2 an artikel sareng
    Blog Akang kedepan nya bisa lebih maju dan berjaya.
    Terus semangat yah,. Kang.. salam sukses salam sejahtera.

    ReplyDelete
    Replies
    1. Sae kang Saud, pangestu. Hatur nuhun parantos berkunjung deui ka blog abi anu sacan bener keneh.Mohon dimbingannya akang. Mugi Sukses selalu nya Kang Saud.Nyuhunkeun diapunten oge ari abi terlambat ameng nuju ka blog anjeun.

      Delete
  2. Betul mas Marlon, ini salah satu tool yang berguna khususnya bagi blogger...misalnya ingin memasukan script iklan ke edit HTML tentunya harus menggunakan tool ini...
    BTW...saya simpan scriptnya buat alternatif mas...makasih...

    ReplyDelete
    Replies
    1. He,.he, Alhamdulillah akhirnya master-besar sudi bakunjung juga ke rumpon saya. Mohon sarannya master.

      Terima kasih ya bang Adhi.

      Delete
    2. sangat berguna sekali mas marlon buat mengedit script tool ini tentunya sangat diperlukan share yang sangat membantu buat para blogger mas marlon..

      Delete
    3. Terima kasih sudah berkunjung sobat Imron. Sebetulnya saya malu sudah berani share soal Coding, karena saya baru kenal coding. Hanya saja saya pikir tadinya untuk Tool pribadi, kemudian saya memutuskan untuk sekalian share deh, barangkali ada sobat pemula seperti saya ini, yang butuh. kan nggak semua mengerti Coding.

      Eh, yang komentar malah para senior!!, jadi selain bangga sudah ditengok, saya rada tengsin juga. Salam sukses ya Im.

      Delete
    4. Sami-sami pemula jadi blogger Kang

      Delete
    5. Iya sobat Cahyo Kusumo sebagai blogger pemula ,kita sangat membutuhkan alat bantu seperti HTML Converter ini.
      Sama halnya mungkin, dengan lay-out design rumah , harus memperhatikan lay-out dimana kita meletakkan peralatan sehingga mudah dan cepat saat diperlukan.

      Delete
  3. memang benar kata mas kompi, script ini sangat berguna, izin coba mas di blog tutorial saya

    ReplyDelete
    Replies
    1. namun menjadi kendala terbesar adalah blog anda mengunakan anti copas, jadi script ini sama saja tidak berguna mas.

      Delete
    2. Wah, iya ya sob?, Terima kasih sudah mengingatkan, langsung saya cabut deh, saya lupa dulu hanya nyoba script dari hasil blogging.Eh lupa nyabut.

      Setelah sobat Leony Li info, tentu saja saya cabut script anti-Copast nya. Saya juga ingin menjadi blogger yang mempunyai manfaat seperti kalian para senior. Ya mungkin sementara bisa memberikan manfaat bagi para Newbie seperti saya.
      terima kasih sudah mengingatkan.

      Salam

      Delete
    3. @Leony Li: Sudah saya betulin sobat. terima kasih Infonya.

      Delete
  4. Saya mau pasang tool html converter ini di blog saya, biar blog saya tambah lengkap ^_^

    ReplyDelete
    Replies
    1. Okay sobat Mestiqui, harusnya ini akan sangat membantu dalam mengelola Blog kesayangan kita.
      Terima kasih sudah sudi berkunjung ke Cara Berbagi Online. Hotline Terkini.

      Delete
  5. mas gak bisa bawa kodenya ne...hee maz pake anti kopas se...hee tolong mas pencerahan sedikit

    ReplyDelete
    Replies
    1. Maaf sobat Samsul Bachri, saya benar-benar tidak tahu akan hal ini.
      Tapi sudah bisa di Copy kok sobat.
      Makasih ya sudah sudi mengingatkan saya.

      Delete
  6. dicopy aja ga bisa, niat nge post ga sih?
    kalo punya blog, gausah pake anti copy deh.. lebay om

    ReplyDelete
    Replies
    1. Maaf teman Kamisamazune -Sama, ini diluar sepengetahuan saya. saya benar-benar tidak tahu.
      Tapi sudah bisa di Copy kok teman Kamisamazune -Sama.

      Terima kasih ya sudah mengingatkan saya, sehingga bisa segera saya perbaiki.

      Delete

Terima kasih sobat sudah berkunjung di Hotline Terkini, Cara baru Berbagi Online, sekarang giliran anda berkomentar yang sesuai dengan tema artikel. Salam Blogger.