Membuat Syntax Highligter di Blogspot

Adakalanya kita mbutuhin syntax highligter untuk memasang kode CSS ataupun Javascript pada postingan blog kita, dengan syntax highligter temen-temen bisa menambahkan code-code unik yang bisa anda print, view code khusus untuk code yang kita tulis.
Untuk memulainya silahkan disimak penjelasan saya di bawah ini :
- Seperti biasa Login ke blog anda, kemudian pilih menu Design >> Edit HTML, jangan lupa kasih tanda cetang pada "Expand Widget Template"
- Kemudian cari kode </head>,kemudian pastekan kode dibawah ini kemudian paste di atas kode </head>

<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>

- Kemudian cari kode ]]></b:skin>, copykan kode dibawah ini di atas kode ]]></b:skin> 

.dp-highlighter { font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;font-size: 12px;background-color: #E7E5DC;width: 99%;overflow: auto;margin: 18px 0 18px 0 !important;padding-top: 1px; /* adds a little border on top when controls are hidden */}/* clear styles */.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span{margin: 0;padding: 0;border: none;}.dp-highlighter a,.dp-highlighter a:hover{background: none;border: none;padding: 0;margin: 0;}.dp-highlighter .bar{padding-left: 45px;}.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left: 0px;}.dp-highlighter ol{list-style: decimal; /* for ie */background-color: #fff;margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */padding: 0px;color: #5C5C5C;}.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style: none !important;margin-left: 0px !important;}.dp-highlighter ol li,.dp-highlighter .columns div{list-style: decimal-leading-zero; /* better look for others, override cascade from OL */list-style-position: outside !important;border-left: 3px solid #6CE26C;background-color: #F8F8F8;color: #5C5C5C;padding: 0 3px 0 10px !important;margin: 0 !important;line-height: 14px;}.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{border: 0;}.dp-highlighter .columns{background-color: #F8F8F8;color: gray;overflow: hidden;width: 100%;}.dp-highlighter .columns div{padding-bottom: 5px;}.dp-highlighter ol li.alt{background-color: #FFF;color: inherit;}.dp-highlighter ol li span{color: black;background-color: inherit;}<br /> /* Adjust some properties when collapsed */.dp-highlighter.collapsed ol{margin: 0px;}.dp-highlighter.collapsed ol li{display: none;}<br /> /* Additional modifications when in print-view */.dp-highlighter.printing{border: none;}.dp-highlighter.printing .tools{display: none !important;}.dp-highlighter.printing li{display: list-item !important;}/* Styles for the tools */.dp-highlighter .tools{padding: 3px 8px 3px 10px;font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;color: silver;background-color: #f8f8f8; padding-bottom: 10px;border-left: 3px solid #6CE26C;}.dp-highlighter.nogutter .tools {border-left: 0; } .dp-highlighter.collapsed .tools {border-bottom: 0;} .dp-highlighter .tools a {font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover {color: red;background-color: inherit; text-decoration: underline;} /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; }

- Langkah selanjutnya cari kode </body> dan copykan kode berikut di atasnya

<span class="Apple-style-span" style="color: red;"><script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script></span> 

- Naah sekarang udah selesai, sekarang tinggal masukin script java/css ke dalam postingan kita,
- untuk menyisipkan script java gunakan kode :

<pre name="code" class="JScript">
LETAKAN KODE SCRIPT JAVA YANG AKAN DIPASANG DISINI
</pre>

- Untuk menyisipkan CSS gunakan kode :

LETAKAN KODE CSS NYA DISINI

- Finish dan selamat mencoba ^_^