Priview

IKUTI LANGKAH LANGKAH BERIKUT

1.Login Ke Blogger *Penting
2.Ke Template >> Edit HTML
Cari Kode </head> Lalu Paste Kode Berikut Di Atas Kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>

    <script>

      hljs.initHighlightingOnLoad();

    </script>

3. Masukan CSS

Banyak pilihan CSS yang bisa sobat digunakan, sebelum memilihnya silahkan lihat Demo DISINI.
Untuk Pilihan CSS, bisa sobat ambil DISINI.

Simpan kode CSS tadi diatas ]]><b:skin> atau sobat bisa gunakan CSS dibawah ini, yang saya dapat dari Kang Ismet, silahkan dicoba:
Default

/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/

pre code {

  display: block; padding: 0.5em;

  background: #F0F0F0;

}

pre code,

pre .subst,

pre .tag .title,

pre .lisp .title,

pre .clojure .built_in,

pre .nginx .title {

  color: black;

}

pre .string,

pre .title,

pre .constant,

pre .parent,

pre .tag .value,

pre .rules .value,

pre .rules .value .number,

pre .preprocessor,

pre .haml .symbol,

pre .ruby .symbol,

pre .ruby .symbol .string,

pre .aggregate,

pre .template_tag,

pre .django .variable,

pre .smalltalk .class,

pre .addition,

pre .flow,

pre .stream,

pre .bash .variable,

pre .apache .tag,

pre .apache .cbracket,

pre .tex .command,

pre .tex .special,

pre .erlang_repl .function_or_atom,

pre .asciidoc .header,

pre .markdown .header,

pre .coffeescript .attribute {

  color: #800;

}

pre .comment,

pre .annotation,

pre .template_comment,

pre .diff .header,

pre .chunk,

pre .asciidoc .blockquote,

pre .markdown .blockquote {

  color: #888;

}

pre .number,

pre .date,

pre .regexp,

pre .literal,

pre .hexcolor,

pre .smalltalk .symbol,

pre .smalltalk .char,

pre .go .constant,

pre .change,

pre .lasso .variable,

pre .asciidoc .bullet,

pre .markdown .bullet,

pre .asciidoc .link_url,

pre .markdown .link_url {

  color: #080;

}

pre .label,

pre .javadoc,

pre .ruby .string,

pre .decorator,

pre .filter .argument,

pre .localvars,

pre .array,

pre .attr_selector,

pre .important,

pre .pseudo,

pre .pi,

pre .haml .bullet,

pre .doctype,

pre .deletion,

pre .envvar,

pre .shebang,

pre .apache .sqbracket,

pre .nginx .built_in,

pre .tex .formula,

pre .erlang_repl .reserved,

pre .prompt,

pre .asciidoc .link_label,

pre .markdown .link_label,

pre .vhdl .attribute,

pre .clojure .attribute,

pre .asciidoc .attribute,

pre .lasso .attribute,

pre .coffeescript .property {

  color: #88F

}

pre .keyword,

pre .id,

pre .title,

pre .built_in,

pre .aggregate,

pre .css .tag,

pre .javadoctag,

pre .phpdoc,

pre .yardoctag,

pre .smalltalk .class,

pre .winutils,

pre .bash .variable,

pre .apache .tag,

pre .go .typename,

pre .tex .command,

pre .asciidoc .strong,

pre .markdown .strong,

pre .request,

pre .status {

  font-weight: bold;

}

pre .asciidoc .emphasis,

pre .markdown .emphasis {

  font-style: italic;

}

pre .nginx .built_in {

  font-weight: normal;

}

pre .coffeescript .javascript,

pre .javascript .xml,

pre .lasso .markup,

pre .tex .formula,

pre .xml .javascript,

pre .xml .vbscript,

pre .xml .css,

pre .xml .cdata {

  opacity: 0.5;

}

Zenburn

/*

Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>

based on dark.css by Ivan Sagalaev

*/

pre code {

  display: block; padding: 0.5em;

  background: #3F3F3F;

  color: #DCDCDC;

}

pre .keyword,

pre .tag,

pre .css .class,

pre .css .id,

pre .lisp .title,

pre .nginx .title,

pre .request,

pre .status,

pre .clojure .attribute {

  color: #E3CEAB;

}

pre .django .template_tag,

pre .django .variable,

pre .django .filter .argument {

  color: #DCDCDC;

}

pre .number,

pre .date {

  color: #8CD0D3;

}

pre .dos .envvar,

pre .dos .stream,

pre .variable,

pre .apache .sqbracket {

  color: #EFDCBC;

}

pre .dos .flow,

pre .diff .change,

pre .python .exception,

pre .python .built_in,

pre .literal,

pre .tex .special {

  color: #EFEFAF;

}

pre .diff .chunk,

pre .subst {

  color: #8F8F8F;

}

pre .dos .keyword,

pre .python .decorator,

pre .title,

pre .haskell .type,

pre .diff .header,

pre .ruby .class .parent,

pre .apache .tag,

pre .nginx .built_in,

pre .tex .command,

pre .prompt {

    color: #efef8f;

}

pre .dos .winutils,

pre .ruby .symbol,

pre .ruby .symbol .string,

pre .ruby .string {

  color: #DCA3A3;

}

pre .diff .deletion,

pre .string,

pre .tag .value,

pre .preprocessor,

pre .built_in,

pre .sql .aggregate,

pre .javadoc,

pre .smalltalk .class,

pre .smalltalk .localvars,

pre .smalltalk .array,

pre .css .rules .value,

pre .attr_selector,

pre .pseudo,

pre .apache .cbracket,

pre .tex .formula,

pre .coffeescript .attribute {

  color: #CC9393;

}

pre .shebang,

pre .diff .addition,

pre .comment,

pre .java .annotation,

pre .template_comment,

pre .pi,

pre .doctype {

  color: #7F9F7F;

}

pre .coffeescript .javascript,

pre .javascript .xml,

pre .tex .formula,

pre .xml .javascript,

pre .xml .vbscript,

pre .xml .css,

pre .xml .cdata {

  opacity: 0.5;

}

Cara Penggunaan

Untuk menggunakan SyntaxHighlighter ini pada postingan, tulis seperti ini:

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Semoga Berhasil :cool