Tag Archives: blogger

Posting ini adalah tugas dari Alkadri. Saya disuruh untuk memberikan sebelas fakta tentang diri saya. Selain itu saya juga diberi sebelas pertanyaan tentang kehidupan saya. Sebenarnya saya bingung mau memberikan fakta apa hihi . Jadi peraturannya saya akan menuliskan apa … Continue reading →

Saya sebenarnya bingung memilih judul yang tepat untuk postingan ini. Saya ingin bercerita tentang blog milik anggota keluarga saya. Sejauh ini ada abang saya, kakak ipar saya, dan seseorang sebut saja Dhira sudah memulai ngeblog. Sekalian memperkenalkan anggota keluarga saya, … Continue reading →

[English] The Simple What To Do List (Chrome Extension) is the simplest todo list web apps ever. You don’t need to register, login or even wait a loading page.WhatToDo keeps your todo list saved and easy to reopen anytime. WhatToDo works with your brow…

Bagi teman-teman blogger yang memiliki blog tentang tips dan trik blog yang memuat kode-kode html atau javascript pada postingan blognya tentu sudah tidak asing lagi dengan istilah parse html. Kode-kode tersebut tidaklah serta merta tampil dengan begitu saja ketika kode tersebut anda paste pada entri baru postingan blog. Kode yang anda paste begitu saja di blog akan menjadi kode yang terpasang dan aktif di blog, bukan kode yang tertampilkan pada postingan blog. Oleh karena itu kode tersebut harus di-parsing terlebih dahulu. Beberapa website yang menyediakan tool parse-html/html-parser/parsing-html/html-entities yang saya rasa sudah familiar di kalangan blogger yakni seperti Centricle dan Blogcrowds. Namun tentu saja cara tersebut tidak sebegitu ringkas jika anda memiliki sendiri tool tersebut yang terpasang di blog.
Sebelum membuat posting ini saya sempatkan untuk googling sejenak mencari cara memasang tool html parser di blog. Saya temukan beberapa cara yang menyediakan hal tersebut, namun terdapat link yang menuju pada website lain pada kode yang ditemukan. Hal ini tentunya mengurangi daya tarik bagi sebagian blogger.
Atas dasar tersebutlah kali ini saya akan berbagi bagaimana membuat tool parsing html dengan menggunakan kode javascript sederhana.
Berikut adalah tool html parser yang saya buat. Anda pun dapat memanfaatkan tool dibawah ini untuk menampilkan kode html di blog. (tool dibawah bukan iframe dari website lain)

Sepertinya menarik jika anda memilikinya sendiri di blog anda bukan? Oke tanpa basa-basi lagi mari langsung kita simak bagaimana cara pembuatannya!

Sebelum anda beranjak ke bagian ‘kode tinggal copas pasang‘, alangkah baiknya jika anda mengetahui cara kerja kode tersebut sehingga anda pun akan memahami kode tersebut. Cara kerja tool html-parser tersebut yakni berbasiskan pada kode javascript sederhana yang memuat fungsi replace pada kode-kode tertentu. Javascript tersebut akan mereplace kode < ” & \’ > menjadi &lt; &quot; &amp; ' &gt;
Mari kita lihat sejenak contoh yang saya ambil dari website pembelajaran kode pemrograman website TIZAG
JAVASCRIPT CODE

<script type=”text/javascript”>
var visitorName = “Chuck”;
var myOldString = “Hello username! I hope you enjoy your stay username.”;
var myNewString = myOldString.replace(“username”, visitorName);

document.write(“Old string = ” + myOldString);
document.write(“<br />New string = ” + myNewString);

</script>

HASIL REPLACE

Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.

Dengan melihat contoh sederhana kode diatas saya harap anda dapat mengerti dengan mudah. Baik sekarang langsung saja saya bagikan kode javascript yang memuat tool parsing html.

CODE JAVASCRIPT TOOL HTML-PARSER

<div style=”text-align: center; width: 100%;”>
<div style=”margin: 0 auto; padding: 0; width: 100%;”>
<div id=”mainDiv” style=”padding: 2px 0;”>
<textarea cols=”21″ id=”tarea” onfocus=”code_check();” rows=”10″ style=”font-size: 12px; height: 80%; width: 92%;”></textarea>
<div style=”margin: 0 auto; padding: 5px 0; width: 95%;”>
<button onclick=”code_convert();” style=”margin-right: 5px;” type=”button”>Konvert</button>
<button onclick=”code_clear();” style=”margin-left: 5px;” type=”button”>Hapus</button> </div>
</div>
</div>
</div>
<script>
function code_check(){
var focuscheck=document.getElementById(‘tarea’);if(focuscheck.value.indexOf(‘Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog’)>0)focuscheck.value=”;}
function code_clear(){
var wtarea=document.getElementById(‘tarea’);wtarea.value=”;}
function code_convert(){
var ctarea=document.getElementById(‘tarea’);var toConvert=ctarea.value;
var toConvert=toConvert.replace(/&/g,”&amp;”);
var toConvert=toConvert.replace(/’/g,”'”);
var toConvert=toConvert.replace(/”/g,”&quot;”);
var toConvert=toConvert.replace(/</g,”&lt;”);
var toConvert=toConvert.replace(/>/g,”&gt;”);
ctarea.value=toConvert;ctarea.focus();ctarea.select();};
var x=document.getElementById(‘tarea’);x.value=’\nPastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog\n\nTool ini Meng-konversi Kode sbb:\n < ” & \’ >\nmenjadi\n &lt; &quot; &amp; ' &gt;\n\nCreated by www.WAHYUPUTRA.web.id’;x.rows=gr;
</script>

Silahkan copy-paste kode diatas pada blog atau website. Anda dapat meletakkannya pada bagian widget ataupun pada satu halaman tersendiri. Saya tidak peduli anda mengganti atau tidak info ‘created by‘ yang terdapat pada kode tersebut. Yang terpenting ialah bagaimana tulisan atau kode yang saya buat dapat menimbulkan kebermanfaatan bagi teman-teman sekalian. Namun, Alhamdulillah jika ada yang tetap menjaga info ‘created by‘ pada kode tsb

Semoga postingan saya kali ini bermanfaat. Bagi yang tidak sabar untuk mencobanya di blog/website masing-masing, segeralah mencobanya!
Semoga Sukses!
Wahyu Putra