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;}
.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 "Bersihkan" 4. Jenis Kode : < " & " > & ± ® © " 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, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<div style="clear: both;">
<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, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");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.
Posting Komentar untuk "Tutorial Cara Membuat Alat Parse Kode HTML di Laman Blog"