Cara Menambahkan Syntax Highlighter pada Blogspot

Ilmu Informatika : Cara Menambahkan Syntax Highlighter pada Blogspot . Halo sobat, tak bosan-bosannya saya menyapa sobat sekalian, semoga betah membacanya ya. :-)
Pada kesempatan kali ini saya ingin sedikit berbagi cara menambahkan syntax highlighter pada blogspot.
Syntax Highlighter ini berfungsi merapikan source code yang ingin kita tampilkan pada postingan blog kita, misalnya java, php, js, phyton, dll.
Berikut adalah penampakannya :)
syntax highlighter
Syntax Highlighter
Oke sob, langsung saja ya ikuti langkah-langkah berikut ini:
1. Pertama-tama masuklah ke akun blogger sobat. buka www.blogger.com kemudian masuk ke blog sobat.
2. Pilih Template -> Edit html
3. Cari kode ]]></b:skin> untuk mempermudah bisa tekan Ctrl+F kemudian ketikkan kode tadi. Kemudian pastekan kode berikut diatas kode yang tadi.

/* Syntax Highlighter Isrul.com*/
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;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(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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:12px;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}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
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:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
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:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642
}

4. Cari kode </head> dan copykan kode berikut diatasnya.

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

5. Kemudian pilih Save template.

Untuk menggunakannya, anda gunakan kode berikut :
<pre><code>

CODE KAMU TARUH DISINI

WWW.ISRUL.COM

</code></pre>
Demikian artikel mengenai Cara Menambahkan Syntax Highlighter pada Blogspot . Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

4 Responses to "Cara Menambahkan Syntax Highlighter pada Blogspot "

  1. makasih banyak infonya Gan, numpang comot kodenya ya..ane tau dari grup GAI. Mampir2 ke
    http://www.myportal-info.com
    http://rofaifaidomain.blogspot.com
    kita tukar link ya, tinggal klik backlink di menu navigasi ane, sekali lagi makasih Gan

    ReplyDelete
  2. gmana mau ambil scriptnya kalo gak bisa copas gan ? mau di tempel

    ReplyDelete

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...