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.


18 komentar

Click here for komentar
01 September, 2013 ×

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.

Balas
avatar
admin
01 September, 2013 ×

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

Balas
avatar
admin
01 September, 2013 ×

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.

Balas
avatar
admin
01 September, 2013 ×

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

Terima kasih ya bang Adhi.

Balas
avatar
admin
04 September, 2013 ×

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

Balas
avatar
admin
04 September, 2013 ×

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

Balas
avatar
admin
04 September, 2013 ×

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

Balas
avatar
admin
04 September, 2013 ×

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.

Balas
avatar
admin
04 September, 2013 ×

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

Balas
avatar
admin
04 September, 2013 ×

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

Balas
avatar
admin
05 September, 2013 ×

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

Balas
avatar
admin
05 September, 2013 ×

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

Balas
avatar
admin
13 October, 2013 ×

Sami-sami pemula jadi blogger Kang

Balas
avatar
admin
13 October, 2013 ×

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.

Balas
avatar
admin
30 July, 2014 ×

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

Balas
avatar
admin
01 August, 2014 ×

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

Balas
avatar
admin
03 August, 2014 ×

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.

Balas
avatar
admin
03 August, 2014 ×

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.

Balas
avatar
admin

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.


Forum Topik Terkini Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar