Cara Memposting Source Code di Blog Kita (Blogger dan Wordpress)

Yaa mungkin tutorial ini sudah banyak di internet. tapi ada seorang teman saya Teguh yang bertanya mengenai hal ini, jadi saya coba untuk menshare Cara Menampilkan/Memposting Source Code di Wordpress dan Blogspot. Alangkah bagusnya jikalau kita melihat tampilan source code seperti di Notepad++. Nah pada tutorial ini saya akan mencoba untuk merealisasikan hal tersebut. berikut langkah-langkahnya :

1. Wordpress
Untuk Wordpress, kita tidak perlu susah-susah karena Wordpress sudah menyediakan plugin tambahan untuk pembuatan source codenya. Kita hanya perlu menambahkan tag [source code language="java"][/source code] pada saat kita akan mempostingkan sebuah soure code. Contohnya sepert berikut ini : 

[source code language="java"] 
public class HayAct extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
} [/source code] 
kita bisa mengganti format bahasanya dengan merubah languagenya yaitu yang diapit dengan dua tanda kutip sesuai dengan yg kita inginkan.


Hal yang seperti di atas tidak berlaku di blogspot, karena pihak blogspot tidak mendukung pemasangan sourcecode dalam postingan. tetapi jangan khawatir, kita bisa memanfaat coding javascript yang bernama SyntaxHighlighter. Syntax Highlighter adalah suatu java script yang dibuat adalah Alex Gorbatchev dan berupa open source, sehingga kita dapat mendowload source code-nya dan memodifikasi sesuai keinginan kita. Berikut langkah-langkahnya :

• kita buka akun blogger kita, kemudian pilih  Dashboard-Design-Edit HTML, sebelumnya kita lakukan backup dulu templatenya agar jika terjadi sesuatu yg tidak diinginkan dapat kita kembalikan seperti semula.
• Kemudian Edit HTML tekan tombol Ctrl-F dan letakkan source code di bawah ini di atas tag </head>
  

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

• Kemudian Simpan
• nahh, apabila kita ingin posting soure code, kita hanya perlu menyisipkan tag berikut :

<pre class="brush: java">
/*ketikkan source code di sini*/
</pre>

Sekian tutorial kali ini, semoga bermanfaat :)