Tutorial Cara Membuat Alat Parse Kode HTML di Laman Blog

Alat parse kode html atau alat konversi kode html adalah sebuah alat konversi pengganti kode html tertentu yang tidak bisa dipublish pada halaman blog ataupun pada situs web. Alat parse ini bagi seorang blogger pasti dibutuhkan terutama dalam memparse kode-kode iklan adsense ataupun kode html lainnya yang hendak disisipkan pada halaman blog. Pada tutorial kali ini saya akan membagikan cara untuk membuat alat parse kode html sendiri yang dapat anda pasang di blog atau website anda sendiri.

Tutorial ini saya dapatkan dari mas rivai silaban, sebuah aplikasi konversi tag html yang dapat digunakan untuk memparse kode html. Aplikasi ini dibuat dengan Macromedia Dreamweaver 8 yang memiliki script yang ringan dan telah valid HTML 5 serta CSS 3, sehingga cocok untuk anda yang menggunakan template blog yang telah berbasis HTML 5. Script pada alat parse kode HTML ini juga sangat SEO friendly dan menganut ajaran pengcodean script yang memiliki standar SEO. Cara membuat alat parse ini juga terkesan sangat mudah, terbukti ketika saya mempraktekkan dalam membuat alat parse ini sekali buat langsung jadi, dan hasilnya sangat bagus. Anda dapat melihat demo alat parse HTML yang saya pasang pada alat parse html. Bagaimana? Apakah anda tertarik untuk membuatnya juga? Inilah tutorialnya.

Langkah pertama yang harus anda lakukan adalah memasang script berikut ini ke dalam template blog anda. Caranya adalah login pada dashboard blogger anda, lalu pilih “Template” dan klik “Edit HTML”. Setelah itu cari kode ]]></b:skin> dan untuk memudahkan anda dalam menemukan kode tersebut, langsung saja tekan ctrl+f pada keyboard anda dan cari kode tersebut. setelah anda menemukan kode di atas, lalu copy kode script berikut ini dan paste atau letakkan tepat di atas kode ]]></b:skin> tadi .

Kode yang harus dipasang pada template blog anda:

.boxarea_BD { background-color:#F2F2F2; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.boxarea_BD:hover { background-color:#FFFFFF; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.BD_tombol {color:#FFFFFF;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #c4c4c4;cursor: pointer;border-radius: 4px;
background: #fbfbfb;background-color: #000000;}
.BD_tombol:hover{color:#FFFFFF;font-weight:bold;text-decoration:none;background-color: #313333;}

Langkah kedua adalah memasang kode script alat parse ini ke halaman postingan atau ke widget yang anda suka (tergantung selera anda). Untuk pemasangan pada widget blog anda, caranya adalah ke halaman dashbor blog kemudian klik “Tata Letak”, lalu pilih “Add Gadget” atau tambahkan gadget, dan pilih “HTML / Java Script”. Lalu copy kode script di bawah ini pada gadget tersebut.Untuk memaksimalkan ukuran agar sesuai dengan halaman maka silahkan edit kode [cols=”50” rows=“50”] menjadi ukurang widget pada halaman blog anda masing-masing.

Sementara itu jika anda ingin memasang alat parse kode html ini pada halaman blog sebagaimana yang saya lakukan, maka caranya adalah silahkan ke Laman pada blog anda, dan klik “Laman Baru”, dan pilih “Laman Kosong”. Lalu anda harus berada pada mode “HTML” dan bukan mode compose. Kemudian copy kan kode alat parse di bawah ini pada halaman kosong HTML anda tadi. Setelah itu berilah judul laman dan setting apakah halaman tersebut boleh dikomentari atau tidak dengan cara klik roda gigi pada sidebar sebelah kanan dan pilih “Jangan Izinkan Komentar”. Setelah selesai mengcopy paste alat parse ini kemudian klik terbitkan halaman.

Kode script alat parse HTML adalah sebagai berikut:

<textarea cols="50" rows="15" wrap="virtual" class="boxarea_BD" id="bdkode" placeholder="1. Ketikkan kode html anda disini, 2. Kemudian klik Konversi , 3. Untuk membersihkan klik &quot;Bersihkan&quot; 4. Jenis Kode : &lt; &quot; &amp; &quot; &gt; &amp; &plusmn; &reg; &#169; " spellcheck="false"></textarea>
<br /><span>
<button class="BD_tombol" id="bdclear" onClick="convert();this.disabled = true;" title='Konversi'>KONVERSIKAN</button>
<button class="BD_tombol" onClick="cdClear();" title='Bersihkan'>BERSIHKAN</button>
</span><script type="text/javascript">
function cdClear() {
var wtarea = document.getElementById('bdkode');
wtarea.value = '';
wtarea.focus();
document.getElementById('bdclear').disabled = false;
}function convert(){var ele1 = document.getElementById("bdkode");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<div style="clear: both;">

Dan silahkan ikuti tutorial  cara membuat alat parse kode html di laman blog dengan baik, semoga artikel ini bermanfaat. Dan selamat mencoba, semoga berhasil.