Menampilkan Kode Html Pada Postingan « ….the Gands owns you…

Menampilkan Kode Html Pada Postingan

August 10, 2008 by thegands

Semalam setelah berkunjung ke blognya bang Hakimtea, saya membaca tulisan beliau tentang tiga jasa web untuk menampilkan kode html pada postingan yang di khususkan untuk pengguna blogspot.

Saya menjadi terinspirasi untuk membuat kode yang sama. Namun kamu gak usah terburu-buru langsung mencemooh saya. Karena saya lihat ketiga web yang diajukan beliau menggunakan bahasa php untuk memparsing kode html.

Nah oleh karena itu saya akan membuatkan kodenya menggunakan bahasa Javascript dan cara ini memiliki kelebihan tersendiri. Kenapa? Karena kode yang saya berikan gratis dan kamu gak perlu capek-capek menghabiskan membuka halaman web lain untuk memparse kode html kamu. Iya nggak? Karena kamu cukup mengkopi paste kode html yang akan saya beri dan lakukan dan parsing html sesuka kamu.

Kopikan kode html berikut dan simpan dengan nama html_encode.html -nama file boleh apa saja

<html>
<head>
<title> Html Encode © by thegands.wordpress.com</title>
</head>
<style>
*, input, textarea
{
font-family: verdana;
font-size: 13px;
}
</style>
<script language=”javascript”>
<!–
function encode(before, after)
{
after.value=before.replace(/</gi, “<”).replace(/>/gi, “>”).replace(/>/gi, “>”).replace(/©/gi, “©”).replace(/®/gi, “®”).replace(/™/gi, “™”).replace(/”/gi, “"”);
}
//–>
</script>
<body>
<form name=”frmencode”>
Enter Html code here : <input type=”button” value=”Encode Now” onclick=”encode(before.value, after)”><br>
<textarea name=”before” rows=”15″ cols=”100″></textarea><br>
Result : <br>
<textarea name=”after” rows=”15″ cols=”100″ readonly></textarea>
</form>
</body>
</html>

Masukkan kode html pada kotak isian yang berada paling atas.

Kemudian tekan tombol “Encode Now” *tanpa tanda kutip

Kemudian kopikan hasilnya pada kotak isian yang berada paling bawah dan paste ke postingan kamu.

Note:Dikhususkan buat para pengguna Blogspot. Untuk pengguna WordPress, TinyMce telah melakukan parsing ini secara otomatis.

Selamat berblogging ria..

Update!!!!

Karena ketidak kompatibelan hasil kopas koding diatas ke text editor, saya menyarankan untuk mengetik koding secara manual atau kamu bisa mendownload kode filenya dari sini. Setelah itu ubah ekstensi filenya menjadi dari .txt menjadi .html

Posted in AJAX, Blogging, internet, programming | Tagged blogger, Blogging, blogspot, encode, html, html entities, html parsing, javascript, parse, parsing, wordpress | 53 Comments

53 Responses

on August 10, 2008 at 7:53 am | Reply Masenchipz

mantep bro… siip
on August 10, 2008 at 7:56 am | Reply carra

mmmmm… *garuk2 pala*
on August 10, 2008 at 8:14 am | Reply Rully Patria

Ijin nyoba ya Kang..

Salam kenal
on August 10, 2008 at 8:21 am | Reply thegands

@masenchipz:
makasih bro…

@carra:
kenapa mbak?

@Rully Patria:
oke bro…
salam kenal juga..
on August 10, 2008 at 8:41 am | Reply My

ajari mbak dnkz.. biar mbak gak gaptek lagi..
on August 10, 2008 at 8:41 am | Reply ichanx

*ngegaruk kepala carra pake garpu*
on August 10, 2008 at 8:48 am | Reply Jontri Pakpahan

ga jalan pun bro…
on August 10, 2008 at 9:08 am | Reply thegands

@my:
boleh mbak.. sering2 aja jajan es degan kesini, ntar saya sediain artikel yang cukup lumayan deh..

@ichanx:
wkwkwkwk… kasihan mbak carranya tuh bro…

@Jontri Pakpahan:
itu karena klo kita kopi paste koding tersebut, tanda kutip dua diubah menjadi tanda ” dan “ , jadi perbaiki dulu tanda kutip duanya menjadi “. Oke?
on August 10, 2008 at 9:09 am | Reply thegands

@jontri:
maksud saya backtick gitu bro… ngerti kan maksudku? coba liat aja pada tanda kutip dua kode yang kau kopas. aneh kan kutip duanya?
on August 10, 2008 at 9:40 am | Reply hakimtea

masukan dikit mengenai tanda kutif itu ya…

Jadi sebelum mempublish kode html yang akan di tampilkan di postingan sebaiknya gunakan <code> dan akhiri </code> jadi tanda kutipnya tidak mengalami perbahan karakter.

dari “tandakutip” menjadi "tandakutip"

Bisa dicoba offline nggak mas, saya tadi coba offline dengan mengedit dulu tanda kutip tapi belum beruntung…

Btw, sepertinya akan jadi mantab nih tipsnya…
on August 10, 2008 at 9:46 am | Reply thegands

@hakimtea:
dah nyoba pake tadi, tapi gak bisa juga… ya terpaksa harus di coba-coba lagi mengganti kutip duanya…

Klo gitu, saya kasih source code yang bisa di download deh.. donlot aja di sini
mas. setelah itu ubah aja extensi filenya dari txt menjadi html. dan mas coba lagi..
on August 10, 2008 at 9:46 am | Reply Paman Gober

Weh udah master dikau neh es dogan, aku belajar sama dirimu ajah ya!
on August 10, 2008 at 9:50 am | Reply thegands

@Paman Gober:
boleh tuh bro.. tapi bagi2 duitnya ya? hehehehe
on August 10, 2008 at 9:54 am | Reply hakimtea

seeep… berarti koment saya tadi barengan dengan update kali ya… iya deh download saja… thanks
on August 10, 2008 at 9:59 am | Reply thegands

@hakimtea:
makasih buat kunjungannya lagi mas. Eh, btw bener yah dicari developer DomTabs menjadi plugin BlogPage yah… Hmmm, mau dong ngerjainnya… Tapi gak sekarang kan? Soalnya mau wisuda jadi lagi sibuk2nya…
on August 10, 2008 at 10:37 am | Reply didta

emang matab belajar disini. Shiiip bro!
on August 10, 2008 at 11:17 am | Reply diorockout

Mantab
*ngacungin jempol*
on August 10, 2008 at 11:37 am | Reply Manik

Sepertinya ini Blog cocok dibuat sebagai Forum pembelajaran aja.
Bagus2 kutengok Tips dan Triknya
on August 10, 2008 at 12:35 pm | Reply lala

haduuu
ampuuunn

ga ngertii…
kudu diprint.. dibaca 10x
praktek lapangan 100x

itu pun hasilnyah..

diragukan!
on August 10, 2008 at 2:15 pm | Reply Artha

mau coba ach….
on August 10, 2008 at 2:40 pm | Reply Taktiku

Wah bagus nih… saya save as ya boss
on August 10, 2008 at 3:03 pm | Reply xero

wah solusi mudah, trims da bagi2 ilmu om
on August 10, 2008 at 4:19 pm | Reply nana

wadohh.. blogspot saya udah ga keurus.
tar coba yaa..

*garuk2 kepala*

dohh..
on August 10, 2008 at 4:35 pm | Reply badoer

Makin mantap aja bro, wah mau wisuda ya? Jdi pengin nyusul
on August 10, 2008 at 7:43 pm | Reply gareng

sip2, makasih postingannya. jadi nambah ilmu lagi. hehe…
http://www.gareng.net/ , u comment, i follow
on August 10, 2008 at 8:15 pm | Reply aremanglobal

greed australia jhon key woman stone
on August 10, 2008 at 8:51 pm | Reply arhan

mantep nh, advance bener nih
on August 10, 2008 at 10:17 pm | Reply ma2nn_ski one

wah bagus….. nih….. mau nanya kalo menampilkan embed berbasis flash di wordpress gimana…… tlg ya…
on August 10, 2008 at 11:59 pm | Reply mercuryfalling

wah harus kursus private neh
on August 11, 2008 at 12:46 am | Reply mierz

waaaaaw, dicoba dulu…
bisa nggak yaw..
test test test..
on August 11, 2008 at 12:54 am | Reply mantan kyai

hmmm…kali ini bisa langsung dicoba … thx bro
on August 11, 2008 at 1:15 am | Reply thegands

@didta:
makasih bro….

@Manik:
kurasa pun akan jadi seperti itu lae…

@lala:
emang susah dimengerti kodingnya mbak… ntar aja akan saya ulas lagi kodingnya ya…

@Artha:
Oke mbak… eh… bang… hehehehe… dicoba…dicoba satu….

@Taktiku:
boleh bro..

@xero:
U’re welcome bro… tapi jangan panggil om ya bro, masih muda banggeeeet neh.. wkwkwkwkwk…

@nana:
aku malah mau menjajal blogspot. katanya semakin hari semakin handal. Tak coba ngeblog di blogspot dulu ah…

@badoer:
iya neh.. doain yah biar lulus… *seperti pungguk merindukan bulan*

@gareng:
oke bro.. silahkan mencicipi hidangan2 postingan saya yang lainnya…

@arhan:
masih nubi kok bro… masih oon kayak dulu…

@ma2nn_ski one:
Akan dibahas pada tulisan saya yang berikutnya. Ocre?

@mercuryfalling:
disini aja privatenya mbak.. disini akan saya jelaskan semuanya… jadi hemat biaya kan? hehehe…

@mierz:
klo dah berhasil atau error, kasih tau aku ya bro..

@mantan kyai:
siiip deh… *ngacungin jempol buat pak kyai*
on August 11, 2008 at 2:30 am | Reply Edi Psw

Wah, tips yang menarik nih. Makasih.
on August 11, 2008 at 2:32 am | Reply Moh Arif Widarto

Tool yang bermanfaat bagi para pengguna Blogger.
on August 11, 2008 at 3:47 am | Reply My

apa hubungannya es degan dengan artikel deq??
on August 11, 2008 at 1:32 pm | Reply masmoemet

waahhh … contoh hasilnya kaya apa nih
on August 11, 2008 at 1:57 pm | Reply rian

ya nih kalo di wordpress tanda petik satu juga bisa berubah jadi tanda petik 2, makanya kadang harus nulis manual… hehe thanks ni infonya… bagus bos… hehe
on August 11, 2008 at 9:34 pm | Reply pencuri kode

mantap deh izin mau curi kode nya
on August 12, 2008 at 12:53 am | Reply thegands

@Edi Psw:
makasih pak..

@Moh Arif Widarto:
bener pak. karena pengen ngeblog di blogger juga… dan juga pengen nambah teman2 pengguna blogger…

@My:
dengan membaca artikel, berhadiah es degan lho.. hehehehe..

@masmoemet:
kayak kode html diatas pak… bapak ikutan kopdar 17-an?

@rian:
makasih bos… sering2 maen kesini yah… *promosi mode on*

@pencuri kode:
ada ya pencuri yang minta izin?wkwkwkwkwkwkwk… oke bro… silahkan di comot…
on August 12, 2008 at 3:32 pm | Reply rei_psycho d' st★r。

ga ngerti aku..

emang klo kodenya ditampilkan di post knapa ?
on August 13, 2008 at 1:19 am | Reply thegands

@rei_psycho d’ st★r。:
di wordpress hal ini tidak perlu dilakukan, tapi di blogger, hal ini harus dilakukan. hehehehe….
on August 13, 2008 at 1:37 am | Reply aji

wah hebat,
main html, jadi ingat masa muda dulu
on August 13, 2008 at 2:24 am | Reply thegands

@aji:
enakan buat sendiri pak..
on August 13, 2008 at 7:03 am | Reply dimas

mas caranya nulis code tapi ada background selang seling gitu warnanya, tuh gmn yah? ada nomer line nya juga, saya pernah liat yang seperti itu tapi gak tau caranya.. apa itu pakai plug in yah?
on August 13, 2008 at 7:17 am | Reply thegands

@dimas:
ntar saya ulas mas..
on August 14, 2008 at 3:29 am | Reply Wordpress Syntax Highlighting « ….the Gands owns you…

[...] ini saya tuliskan karena adanya request yang menanyakan kepada saya tentang menampilkan code yang berwarna warni. Untuk lebih jelasnya, [...]
on August 18, 2008 at 5:22 pm | Reply uwiuw

makasih gand, ini posting yg membantu sy sekali mengurus blog sy di blogspot
on September 27, 2008 at 7:48 am | Reply Heru

Wah, baru nemu ni. Blog tutorial abis… Thank’s a lot for this info! good luck!
on September 27, 2008 at 3:59 pm | Reply gheza

dicoba dolo yach!!!
entar kalo ada apa2 balik lagi!!!
on September 30, 2008 at 11:26 am | Reply thegands

@heru:
makasih.. sering2 mampir yah…

@gheza:
silahken…
on October 1, 2008 at 11:32 am | Reply Andre

Aduh, masih kabur neh belajarnya? bisa diulang lagi gak? kalo bisa dengan cara visual deh Gak mudeng saya
on October 3, 2008 at 4:10 pm | Reply duan

tipsnya mantep bro…di bookmarks dulu dah,..!:)
on March 9, 2009 at 6:27 pm | Reply nicco

hello really a nice one..can you provide more information on this?i m interested