Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

Panduan Membuat Kode HTML Parser Box

Semalam bingung seri fikirkan macamana nak tampilkan kode HTML dalam bentuk posting. Banyak cara sudah seri cuba tetap juga tak berjaya.

Jadi terpaksalah seri selongkar internet, dan terjumpa gadget ini yang boleh memparse kode HTML agar dapat tampil di posting.

Sebenarnya gadget ini amat berguna untuk para blogger terutama kepada mereka-mereka yang sering membuat posting tentang blogger tips. Ada kalanya kita terpaksa buat post kode HTML untuk dicopy-paste oleh blogger.


Ini Kode Untuk Membuat HTML Parser Box




<script type="text/javascript">

function convert(){
var ele1 = document.getElementById("somewhere");
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>

<table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody>
<tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea>

<input onclick="convert();" type="button" value="Parse Script" /></td> </tr>
</tbody></table>



01 - Nama Parse Script boleh diubah mengikut kehendak masing-masing.
02 - Ukuran Box boleh diubah dengan menukar angka-angka di bahagian ini:
a) width: 400px
b) "top" width="400"
c) textarea cols="50"
03 - Cara Pengunaan: Copy-paste kode HTML yang hendak diparse kedalam kotak dan klik SEKALI sahaja.
04 - Cara Pemasangan: Pergi ke Blogger - Dashboard - Design - Add a GadgetHTML/JavaScript - Save
05 - Contoh Parser Box lihat dibawah C/Box seri.


Kotak Kosong Untuk Menyimpan Kode HTML yang telah diparse agar kelihatan kemas sewaktu diposting. Copy-paste kodenya dibawah ini.



<div style="overflow:auto; width:100%px; height:290px; padding:0px;border:1px solid #000000;">

Letakkan Kode Yang Telah Di Parse Di Ruangan Ini

</div>



01 - Height boleh diubah mengikut kesesuaian.
02 - Border kalau nak besarkan boleh guna angka tinggi, contoh 2 atau 3. Kalau hendak hilangkan border guna angka 0.
03 - 000000, ini warna border, boleh juga ditukar mengikut kesesuaian latar blog.


Kalau ada apa-apa cadangan untuk memperbaiki artikel ini amat seri alu-alukan. Mohon tinggal pesan/cadangan di kotak komen.

10 Pandangan:

PuanBee Januari 08, 2011  

untuk apa nih seri ?

Siti Safiyyah Januari 08, 2011  

wahh nik gak ni..tak penah lg jumpe kt mane2 blog..thanks sbb berkongsi.. :)

~~su manje~~~ Januari 08, 2011  

nice post untuk tutorial
blog seri su singgah:
petang sabtu terasa jangal
panas dibadan tak kebah-kebah

html memang payah sekali
bagi mereka yang buta i.t:
nice post di blog seri
buat su penyuluh i.t

sakitnya badan tak terkata
bagai jarum menusuk nusuk
blogwalking su sudah merata
siapa update su terus masuk....

cornermystery.com Januari 08, 2011  

wah, mantap sekali, tidak rugi selalu menjadi follower sejati disini.. mantap

maya Januari 08, 2011  

bagus tips ni. menampakkan kekemasan entry...tapi omu masih belum nak gunakan lagi..

Che Armad Januari 09, 2011  

salam...
hari tu seri ade bg tahu... favicon gagal berfungsi....

che armad rase seri salah parking kt &quot;Edit HTML&quot;....

dulu buat pun... try n error.. lebih 12 kali baru jadi.... hehehehe....


ok...
try ar...
kalau x jadi...
che armad pun tak tahu ar...

take n joy....



buka Edit Template HTML....




kat bawah contoh kod HTML dari atas sekali....




-------------------------------


&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;!DOCTYPE html&gt;
&lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;





&lt;head&gt;
&lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/&gt;
&lt;b:if cond='data:blog.isMobile'&gt;




&lt;a href='http://www.hostanypic.com/show.php/14506_animated-favicon1.gif.html' target='_blank'&gt;&lt;img alt='Free Image Hosting At site' src='http://www.hostanypic.com/out.php/t14506_animated-favicon1.gif'/&gt;&lt;/a&gt;



&lt;meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/&gt;
&lt;b:else/&gt;
&lt;meta content='width=1100' name='viewport'/&gt;
&lt;/b:if&gt;
&lt;b:include data='blog' name='all-head-content'/&gt;
&lt;title&gt;&lt;data:blog.pageTitle/&gt;&lt;/title&gt;






-----------------------------






kod paste bagi favicon ialah:




&lt;a href='http://www.hostanypic.com/show.php/14506_animated-favicon1.gif.html' target='_blank'&gt;&lt;img alt='Free Image Hosting At site' src='http://www.hostanypic.com/out.php/t14506_animated-favicon1.gif'/&gt;&lt;/a&gt;



seri kena upload edit/upload icon kt...

:http://www.hostanypic.com

:http://www.hostanypic.com



ok...

semoga berjaye...




p/s: jgn kidnap favicon che-armad sudehh....

Tanpa Nama,  Januari 27, 2011  

apa yang saya cari, terima kasih

Tanpa Nama,  Januari 31, 2011  

co szukalem, dzieki

Yastro Februari 18, 2011  

Sok2 nak guna boleh pinjam kod nih...thanks seri.

Febry Iqbal Oktober 26, 2014  

ini sangat bermanfaat untuk menparse iklan ppc sangat bermanfaat kunjungi blog saya teman2 di
Resep Minuman

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger