Memasang Syntax Highlighter Untuk Blogspot

          SYNTAX HIGHLIGHTER, apakah sobat pernah mejumpai dan melihat syntax highlighter ketika berkunjung ke sebuah blog?  Apa itu syntax highlighter? mungkin untuk para blogger yang sudah berpengalaman istilah tersebut sudah tidak asing lagi, betul..betul..betul..! hee

      Syntax highlighter atau penyototan syntax adalah tampilan dari beberapa code editor teks yang menampilan teks, terutama untuk berbagai source code seperti Markup Languange(HTML), CSS, Script, dan code dari bahasa pemrogramman lainnya. Fitur ini memudahkan kita dalam menulis code pada sebuah situs atau blog dengan rapi dan terstruktur seperti bahasa pemrograman atau bahasa markup. Pada kesempatan ini diriku ingin berbagi tutorial tentang cara membuat syntax highlighter.

Berikut langkah cara menambahkan sytax highlighter pada BLOGSPOT :

1. Login ke Blog sobat bukan aku  di  http://www.blogger.com

2. Jika blog berbahasa Indo, maka  klik Menu Rancangan, lalu Pilih Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum kode ]]></b:skin>

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

4. Kemudian, Cari kode </head> dan letakkan kode di bawah ini sebelum kode

</head>

<br /> <script gapi_processed="true" src="https://apis.google.com/js/plusone.js" async="" type="text/javascript"></script><script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"> </script><br />

5. kemudian, Cari kode </body> dan letakkan kode di bawah ini sebelum kode

</body>

<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script><br />

Ok, Selesai deh.. pemasangannya eitss..tapi ntar dulu masih ada 1 langkah lagi yang terakhir, jika kita ingin memposting suatu code dan menampilkan code highlighter pada blog.
Setiap mempublikasikan post yang terdapat kode-kode di dalamnya, sobat blogger harus memasukkan kode tersebut seperti contoh d bawah ini :

<textarea name="code" class="c#" cols="60" rows="10">
KODE YANG AKAN DITAMPILKAN DILETAKKAN DISINI
</textarea>

Horeh sobat sudah berhasil! silakan coba  tampilkan code seperti di bawah ini:
NB: yg ini hanya contoh!
<br /> #include <stdio.h><br /> main(){<br /> printf("Hello World!");<br /> return 0;<br /> } <br />