Untuk menampilkan kode HTML, CSS, atau Script kedalam halaman web dengan apa adanya biasanya akan tereksekusi dan akan muncul pesan2 baru atau bahkan error. Ada beberapa cara untuk menampilkan kode HTML, CSS, dan Script ke dalam halaman website …. ok deh langsung aja, berikut cara2nya :
1. Dengan menggunakan entitas HTML, kode-kode tersebut kalau pada Blogspot harus ditulis pada bagian “Edit HTML” bukan pada “Compose”. Contoh : kode entitas untuk “<” adalah “<” atau “<”, kode entitas tanda kutip adalah “”" atau “”", kode entitas untuk spasi adalah ” ” (semua ditulis tanpa tanda kutip). Saya sendiri menggunakan cara yang ini tetapi dengan bantuan HTML Editor. Untuk menampilkan kode HTML berikut agar tampil seperti ini pada postingan:
<strong>Ini adalah</strong> contoh penulisan kode <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>
Pada bagian HTML ditulis :
<strong>Ini adalah</strong> contoh penulisan kode <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>
Kalau kode tersebut ditulis seperti aslinya dan tidak menggunakan entitas HTML, maka hasil pada postingan akan tampil seperti di bawah ini (warna biru hanya untuk memperjelas) :
Ini adalah contoh penulisan kode HTML agar terlihat apa adanya setelah diposting.
2. Menggunakan Textarea. Semua kode HTML, kode CSS, atau script yang lain di dalam textarea akan ditulis apa adanya setelah diposting. Perhatikan contoh penulisan HTML pada textarea :
<strong>Ini adalah</strong> contoh penulisan kode <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>
Kode HTML yang ditulis :
<textarea cols="50" rows="2" readonly="readonly"><strong>Ini adalah</strong> contoh penulisan kodeg <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u></textarea>
Hasil pada postingan akan seperti ini :
<strong>Ini adalah</strong> contoh penulisan kodeg <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>
3. Cara ketiga untuk menampilkan kode HTML dalam postingan adalah dengan meyisipkan beberapa script Syntax Highlighter pada HTML utama yaitu dengan cara login ke blogspot, pada bagian Layout click Edit HTML kemudian sisipkan kode syntax highlighter for blogger.
Caranya :
3.1. Buka http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css kemudian select dan copy semuanya.
3.2. Masukkan kedalam template index blogger (letakkan sesudah
<b:skin><!--[CDATA[/* and before ]]--></b:skin>
3.3. Sebelum tag
</head>
, masukkan kode berikut:
<!-- Add-in CSS for syntax highlighting --> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
Silahkan untuk menghapus baris yang anda rasa tidak perlu (contoh, Delphi) — karena dapat memperlambat waktu loading.
3.4. Sebelum tag
</body>
, masukkan kode berikut:
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
3.5. Gunakan tombol “Preview” untuk memastikan kode yang dimasukkan benar, kemudian klik “Save Template”.
3.6. Untuk menggunakannya klib tab Edit HTML kemudian gunakan kode berikut :
<pre name="code" class="cpp"> ...masukkan kode html disini... </pre>
4. Menggunakan Quick Escape Tool and Wizard pada Accesifay (mudah-mudahan linknya masih aktif). Dengan tool ini anda hanya cukup mengkopy kode HTML, kode CSS, atau script yang lain pada box yang disediakan kemudian click ‘Convert to escape character”. Hasilnya akan terlihat setelah kode tersebut diterjemahkan menjadi entitas HTML.
Selamat mencoba …..
source : linksukses.com, heisencoder.net
