Cara Menulis Syntax Highlighter di Blogspot

Cara menulis Syntax highlighter di blogspot, bagi kita yang ingin menulis dan berbagi script atau kode program php, java, html ataupun yang lainnya agar tampil lebih menarik seperti adanya tab view source untuk memudahkan pengguna untuk melihat kode seperti dibawah ini,

<?php

class Admin extends CI_Controller{
 
 public function __construct(){
  parent::__construct();
  $this->_is_logged_in();
  $this->load->model('modeladmin');
 }
 
 public function index(){
  redirect('admin/produk');
 }

maka harus melakukan beberapa langkah untuk mendapatkan tampilan seperti diatas, untuk tampilan seperti ini lebih mudah dimengerti karena agak berpisah antara kode dengan informasi yang lain pada halaman artikel di blogspot. berikut langkah-langkah untuk menulis syntax highlighter diblogger.

1. Buka dashboard lalu pilih template pilih tab edit HTML
2. Perlu di ingat Backup dulu template kita agar aman, karena jika terjadi kesalahan maka akan bisa dikembalikan dari file yang sudah kita backup tadi
3. Jika sudah masuk kedalam edit HTML maka cari kode </head> dengan cara tekan tombol keyboard Ctrl + f dan masukkan kata</head> dikotak pencarian yang ditunjukkan sebelah atas kolom, lalu tekan enter
4. Setelah ketemu letak kan kode dibawah ini diatas kode </head>

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;; 
SyntaxHighlighter.all(); 
</script>

Langkah ke 5. Save template

Untuk bagaimana cara pelulisan di postingan blog atau artikel yang pertama dalam entry baru pilih HTML dan tulis kode seperti contoh dibawah ini dan lihat hasilnya pada bagian atas artikel ini.

<pre class="brush:css, brush:html, brush:js">&lt;?php

class Admin extends CI_Controller{
 
 public function __construct(){
  parent::__construct();
  $this-&gt;_is_logged_in();
  $this-&gt;load-&gt;model('modeladmin');
 }
 
 public function index(){
  redirect('admin/produk');
 }
</pre>

Perlu diperhatikan hasil diatas bagaimana cara penulisan didalam HTML postingan kita maka kode yang ingin kita tampilkan haruslah di parse dahulu seperti tampilan diatas dan hasilnya akan terlihat kode yang sebenarnya yang tampil pada bagian paling atas postingan ini. Untuk mem parse kode script bisa menggunakan layanan parse secara online, silahkan search di google, bing, atau yahoo.