Home » » Cara membuat tool HTML converter

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.


Anda sedang membaca artikel Cara membuat tool HTML converter. Silahkan menyebar luaskannya atau mengcopy paste-nya jika artikel ini bermanfaat bagi teman-teman anda, namun jangan lupa, sertakan link Cara membuat tool HTML converter ini sebagai sumbernya. Semoga yang saya sharing di sini bisa bermanfaat. Silahkan temukan juga Hotline Terkini on Google+. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan pembaharuan artikel Hotline Terkini


Your information will not be shared ever
Share This :

18 komentar:

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


English French German Spain Italian Dutch Russian Portuguese Japanese Korean Chinese Simplified

Most Popular

Recent Posts

SITE MEMBER

SITE INFO



Google PageRank Checker




W3 Directory - the World Wide Web Directory
Direktori WeBlog Indonesia

The Author

marlonalamo cover

Marlon Alamo

At last, aliens will think : “There is an intelligent life on Earth”

Old City Jakarta

Support : HOTLINE TERKINI | Cara Baru Berbagi Online
Copyright © 2013. HOTLINE TERKINI - All Rights Reserved
Creating Website Template Published by Marlon Alamo
Proudly powered by GOOGLE