Memasang Syntax Highlighter Pada Bloger

Syntax Highlighter merupkan fitur dalam text editor, khususnya editor source kode, html, php atau bhasa pemrograman yg lain. . .

Dengan kata lain source kode yg kita pasang pada bloger akan berbeda dengan tulisan yg lain n bisa juga mematikan fungsi tersbut klo itu kode html. . .bagi para blogger yg mnjurus ke IT, akan sngat berguna saat Anda ngeblog n berbagi ilmu. .nurut pengalaman saya, klo kita ingin nampilin kode html pada blog kita, kode tersebut mlah berpengaruh dengan tema bisa juga muncul dengan sosok lain

contoh simpelnya kyak gini. .(itu digambarnya kn ada :D)

import javax.swing.*;
public class Hello{
 public static void main (String[]args){
  System.out.println("SEPERTI INI TEMAN.....!");
 }
}

Bagaimana keren kn???klo loe pngin kyak gitu ikutin selanjutnya. .
Now Tutorial Memasang Syntax Pada Blogger / Blogspot kita mulai. .
hanya recommended aja untuk langkah2nya. ..
oke. . .yang pertama loe persiapin yang paling penting adalah backup tema blog loe. ..klo ada kesalahan gue kgak ikutan tanggung jawab loh. . ..
Dalam pemasangannya ntar ada 2 hal utama yg wajib loe perhatiin. .
yg pertama setting dalam html loe. . n yg kedua cara penulisannya agar syntax loe bisa ada highlighternya. . .(krna msih blum mungkin kita nulis lngsung ada highlighternya gitu. .). .
Kita mulai dari hal yg pertama (setting pada html / tema loe) :
Dalam hal ini ada 3 bagian yg ntar jadi tujuan kita dlam ngisi. .(bnyak banget bagiannya)

Bagian 1 : Cari kode berikut : gunakan aja [CTRL]+[F] biar cpet. . .
klo udah ktemu copy kode dibawah ini lalu pastekan diatas kode tersebut. .

Bagian 2 :
Klo udah yg bagian stu kita alih kesini nih. ..
Cari lagi kode berikut : gunakan aja [CTRL]+[F] biar cpet. . .
lalu pastekan kode dibawah ini diatasnya. .

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

Karena Artikel Terlalu Panjang Jadi saya pisah pada artikel Selanjutnya
Baca Selanjutnya......