Panduan Lengkap Memasang Syintax Highlighter (kotak script) CSS di blog

Kumpulan Syintax Highlighter (kotak script) CSS di blog- Syintax Highlighter adalah sebuah place script yang berbentuk kotak area untuk memudahkan para pembaca blog untuk menggolongkan kode-kode terentu seperti JavaScript, CSS, HTML dll.
Contoh:

Caranya cukup mudah,

1. pertama-taman buka Blogger
2. Pada deshboard pilih menu Template
3. Silahkan copy script di bawah ini dan taruh tepat di atas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Selanjutnya copy script di bawah ini dan letakan di atas kode ]]></b:skin> 

 /*PRE*/ pre,i[rel="pre"] { padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:13px; color:#839496; font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; line-height:1.4em; position:relative; white-space: pre; word-wrap: normal; white-space:pre; overflow:auto } pre.line-number { background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFhf9L3VmEbEfI9nOzfVa_N1qbcprnq4cCCqtSKB7TdkjuWukiPJ-P0QfTPyZ067FcQGtcg70JGBfhx9MG3xBQxH4lBnU88BMCVwNZ5N5wvSpVYii9mlSfbT74kUPt_Sz4-vW9pOYKek/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none; } pre.line-number:after{ content:""; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute; } pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before { content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Oswald,Arial,Sans-serif; font-size:14px; text-transform:uppercase; background-color:#41749f; color:white } pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} code { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color: #d14; } #comments code { color:#bbbb6d; } #comments pre { margin-bottom:-15px; } pre code { padding:0 !important; color: #a3a49a; background: none !important; border:none !important; display:block; } pre mark {background-color:#1a5752;color:#a3a483} pre .line-number { float:left; margin:0 1em 0 -1em; color:#61686d; background-color:#39424e; text-align:right; min-width:2.5em; padding-right:4px; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #7195a3; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function { color: #569dcf; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #aa985a; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo { color: #509a55; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #073642; }

Cara menggunaan

• Untuk dapat di tampilakn di postingan, maka anda harus letakkan kode di bawah ini (copy),

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

• Lalu klik compose pada menu page work editing konten Paste kan kode di atas
• Untuk melihat hasilnya klik pertinjau
• Trakhir Save

Share :