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 = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
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...
7 komentar
bang, agar komentar bisa valid sama kode2 python gimana yah??
BalasHapushttp://python113.blogspot.com/
buat tag pre untuk komentar dulu, sama saja dengan tag pre post hanya bedanya sertakan id atau class komentar. klau penulisan begitu hanya untuk posting.
Hapussaya sudh coba sprti itu bang.. tp kod tetap blm bisa y bang...
BalasHapusoya... cara buat pesan komentar, konversi kode, dan oot seperti di blog ini gmna y bang...
mhon bimbingannya..
soalnya, saya dapat cuman satu2 tutorialnya...
ndx langsung lengkap....
cari di blog ini ada, jelajah semua tutor sob :)
Hapuswau... mati matian saya nyari tutorial seperti ini .
BalasHapusTrimakasih gan semoga bermanfaat :)
trik terbaru aja sob, ini sudah kedaluarsa nanti saya update...
Hapussaya tunggun min yg baru
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>