Membuat Syntax Highlighter Untuk Blogger (2)

Bismillah ... Alhamdulillah pada Artikel sebelumnya saya telah menjelaskan cara membuat Syntax Highlighter bagian pertama. Sekarang saya akan menjelaskan cara membuat Syntax Highlighter Bagian Kedua. Untuk lebih jelasnya perbedaan keduanya silahkan simak catatan saya berikut ini :

** Syntax Highlighter Bagian pertama
1. Tampilan warna background putih dengan garis warna hijau
2. Hanya terdapat 3 fasilitas menu, yaitu View Plain, Print dan Help
3. Tampilan Menu biasa atau hanya dengan link tulisan

** Syntax Highlighter Bagian Kedua

1. Tampilan warna background hitam dengan garis biru samar2
2. Hanya terdapat 4 fasilitas menu, yaitu View Plain, copy, Print dan Help
3. Tampilan Menu berupa icon - icon menarik
4. Saat normal menu tidak tampak, saat mouse hover menu muncul (effect hover menu)

Untuk tampilannya sendiri kalian bisa melihat pada gambar dibawah ini:

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :


Untuk membuatnya silahkan kalian Login ke blogger kalian dan silahkan ikuti tahap-tahap berikut ini:

1. Masuk Ke Rancangan
2. Pilih EDIT HTML ---> centang expand template widget
3. Simpan barisan kode berikut diatas kode </head>

<!-- Add-in CSS for syntax highlighting -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- Add-in Script for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- End code hilight -->

4. Simpan Template kalian

Setelah kita memasang scriptnya pada template, sekarang waktunya pemanggilan kode script tadi. Jika kalian yang suka memberikan tutorial dengan menampilkan kode-kode, mungkin ini akan sangat bermanfaat.

1. Untuk Menampilkan kode CSS

<pre class="brush: css">

SIMPAN KODE CSS KALIAN DISINI

<pre>

2. Untuk Menampilkan kode Java Script

<pre class="brush: Java">

SIMPAN KODE JAVA SCRIPT KALIAN DISINI

</pre>

3. Untuk Menampilkan kode HTML

<pre class="brush: html">

SIMPAN KODE HTML KALIAN DISINI

</pre>

Catatan :
Lakukan langkah No.1, 2 dan 3 pada tahap pemasangan setiap kalian membuat postingan dan ingin menampilkan kode-kode pada postingan kalian.

Selesai dech..... Semoga bermanfaat ya ... dan jangan lupa baca juga MEMBUAT SYNTAX HIGHLIGHTER VERSI 3.

Yang Punya Syntax Highlighter : Alex Gorbatchev | http://alexgorbatchev.com/SyntaxHighlighter/