Membuat Syntax Highlighter Otomatis Terbaru di Blogger terbaru

adalah salah satu script yang dapat membuat kode menjadi warna-warni . Kode warna-warni tersebut biasa kita lihat pada blog yang berisi kont...

adalah salah satu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya.

Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Baca juga:  Widget yang Tidak SEO Friendly di Mesin Pencari

Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat tidak cocok digunakan oleh blog yang hanya sekali-sekali menyajikan tutorial alias blog gado-gado, untuk itu bijaklah memilih dan memasang script di blog kita. Sebab, jika berlebihan maka akan berpengaruh terhadap loading blog.

Syntax Highlighter yang saya sajikan ini adalah hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama script Stabilo Syntacs. Syntax Highlighter adalah tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script, maka solusinya adalah menggunakan Syntax Highlighter ini. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya berikut.

Baca juga: Cara Mudah Mencegah Kopi Paste Artikel Kecuali Blockquote

Cara Memasang Syntax Highlighter di Blogger

Langkah 1. Login ke blog anda, kemudian masuk ke dashboard blog yang ingin dipasang Syntax Highlighter.

Langkah 2. Letakkan kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>

/* syntax highlighter Otomatis */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
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}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Langkah 3. Temukan kode </head> lalu letakkan kode di bawah ini tepat di atasnya.

<script src='https://googledrive.com/host/0B8a75E285BMHMDVkVGY1dUhzUUE' type='text/javascript'/>

Langkah 4. Simpan template

Cara Menggunakan Syntax Highlighter di Blogger

Untuk menggunakan Syntax Highlighter harus melalui menu compose dengan pemanggilan kode sebagai berikut.

<pre><code>

Kode JavaScript, jQuery atau CSS masukkan disini

</pre></code>

Demikian cara membuat Syntax Highlighter dan menggunakannya di blogger, semoga berhasil diterapkan di blog anda.