Senin, 22 Desember 2014


Kebanyakan blogger menggunakan blockquote standar untuk berbagi tutorial skrip dan kode dengan pengunjung mereka, namun Alex Gorbatchev telah menciptakan sebuah Highlighter yang berfungsi penuh untuk membuat script dan kode tampak lebih rapi dengan menampilkannya dalam gaya teknologi web seperti HTML, CSS, JavaScript, Php, Python, Sql, xml dll. Dengan Syntax Highlighter Kode ditampilkan baris demi baris dengan nomor baris dan kelompok class kode juga tersedia untuk pengguna dengan pilihan Cetak kode, salin ke klip papan atau untuk melihat Source code.

Cara Menambahkan Sintaks Highlighter Di Blogger?

Langkahnya sederhana dari apa yang Anda bayangkan Ikuti langkah-langkah dibawah ini,

1. Buka akun Blogger> Pilih Template> Edit HTML
2. Backup template Anda untuk menjaga terjadinya kesalahan
3. Lalu cari kode tag seperti ini,

]]></b:skin> atau </style>

4. Dan tepat di bawahnya paste kode berikut,

<!--SYNTAX HIGHLIGHTER BY DB STARTS-->
<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/shThemeDefault.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>
<!--SYNTAX HIGHLIGHTER BY DB ENDS--> 

5. Simpan perubahan yang telah anda buat

Bagaimana menempatkannya di dalam posting?

Setiap kali Anda ingin berbagi kode dari jenis apa pun dengan pembaca Anda, cukup letakkan kode di antara kode berikut,

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">

Tulis kode disini

</pre>

Catatan: Jangan menambahkan kode secara langsung karena Anda akan mendapatkan error di Blogger Editor, silahkan mengurai kode menggunakan Parser terlebih dahulu.

Ganti Tulis kode disini dengan kode yang telah diurai/dikodekan dengan parse dan publikasikan posting anda lalu lihat hasilnya.

Selamat mencoba sob...
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

Tidak ada komentar

[+] Berkomentarlah sesuai dengan topik artikel. Admin lebih suka komentar yang sifatnya membangun.
[+] Jangan meninggalkan link aktif, karena akan terdeteksi otomatis sebagai spam.
[+] Jika kesusahan mencari semua artikel dalam blog ini, pencet saja tombol Sitemap.
[+] Maaf Jika Komentar Tidak Saya Jawab Karena Saya Lagi Sibuk