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 :
- Wordpress
- 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 :
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"]kita bisa mengganti format bahasanya dengan merubah languagenya yaitu yang diapit dengan dua tanda kutip sesuai dengan yg kita inginkan.
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 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>
<pre class="brush: java">
/*ketikkan source code di sini*/
</pre>
Sekian tutorial kali ini, semoga bermanfaat :)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
