Cara posting source code di blogger dengan menggunakan SyntaxHighlighter

masih soal nampilin source code, kemaren dah nyoba yang source code kebaca sebagai text, tapi perasaan ko ga bagus yah kalo source code ga di tampilin secara khusus bakal susah di mengerti nantinya, keliling di google lagi dah, banyak liat blog yang nampilin source code nya rapih, makin penasaran akhirya ketemu juga caranya ternyata pake Syntax Highlighter, bagi yang baru ngeblog pasti muncul pertanyaan apa sih Syntax Highlighter? saya juga gitu soalnya tadi kaga tau ahahaah, Syntax Highlighter itu adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna sesuai bahasa pemograman agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut intinya mah kita liat source code disini hampir sama kaya liat source di text editor kan jadi enak di liat tuh jelas lagi ^^, baca baca baca ternyata banyak macemnya fitur Syntax Highlighter di internet cuma dari hasil googling saya banyak yang pake fitur Syntax Highlighter dari SyntaxHighlighter jadi yah saya pake fitur ini juga deh banyak juga tutornya di google soalnya hehe

langsung aja saya bahas cara nampilin fitur Syntax Highlighter ini di blogger :

1. login ke blogger> rancangan > edit html.

2. saran saya pengeditan codenya mending di text editor laen dulu jadi copiin semua code yang ada di edit template paste di text editor anda, baru dah editnya di situ paya kalo salah ga ngerusak code sebelomnya hehe nanti kalo dah beres baru copiin lagi,lebih bagus lagi bikin copian source code tadi ^^.

3. oke lanjut, copy paste source code berikut setelah sintak <b:skin> (search aja <b:skin> supaya langsung ketemu kalo susah nyari nya ^^):

.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;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
 margin: 0px;
}

.dp-highlighter.collapsed ol li
{
 display: none;
}

/* 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; } 

4. copy paste source code berikut sebelum sintak </head> :

5. copy paste source code berikut di bagian paling bawah, sebelum sintak </body> :

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

nah... waktu posting pas mao nampilin code di Sintax Highlighter, tambahin tag berikut kedalam postingan :

source code anda ditulis disini

jadi deh ahaha, untuk penulisan code tertentu sesuai dengan jenis bahasa pemograman <pre name="code" class="html"> , tulisan html yang warna ijo di id class di ganti dengan bahasa pemograman yang ingin dituliskan seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt, supaya nantinya warna-warna di source codenya beda beda sesuai dengan bahasa pemogramannya.

hasilnya bisa di liat kaya source code yang saya tuliskan di atas, ya entuh hasilnya hoho..