Cara Memasang Sintaks Highlighter untuk blogger

Cara Memasang Sintaks Highlighter untuk blogger

Trik

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...

Artikel Terkait

  • Syntax Highlighter sederhana
    Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator at…
  • Lightbox image post blogger
    Apa Itu Lightbox image post, Lightbox ini Sejenis dengan Pop Up review, Tetapi Bukan Pop Up, Lightbox image post adalah event dimana ketika sebuah gambar pada posting diklik, maka akan muncul review gambar yang menutup semua tampilan halaman tersebut, contoh klik saja gambar diposting ini. Untuk mengaktifkannya, cukup masik ke dasbord blo…
  • Auto readmore tanpa menggunakan javascript
    Dengan banyaknya posting blog yang dibuat, readmore untuk setiap posting sangat perlu dan penting. Auto readmore javascript digunakan untuk menampilkan hanya sebagian artikel melalui fungsi document.write agar posting yang muncul di halaman index/label arsip tidak terlalu panjang, sedangkan isi artikel masih bisa di telusuri oleh peramban. Kel…
  • Widget popular post readmore
    Popular posts pasti selalu terpasang dalam blog, sebab dengan widget popular post inilah kita bisa menunjukkan pada pengujung untuk membaca artikel yang banyak di baca. Dari itu kita bisa memanfaatkan PopularPost Widget biasa berkode PopularPosts1 dalam template blogger untuk dimodifikasi dengan baik dan menarik. Salah satu yang bisa dilakukan…
  • Blogger Mengatur Jumlah Posting per Halaman Label
    Blogger secara default biasanya menampilkan 20 postingan per halaman Label (kategory). Jumlah ini dapat kita rubah sesuai dengan keinginan/kebutuhan kita. Berikut ini langkah untuk mengatur  jumlah postingan per halaman label (kategori): Note: Sebaiknya gunakan browser Mozilla Firefox, jangan lupa mem-backup template sebelum mengedit …
  • Cara dan Panduan membuat related post thumbnail
    Related post ini mempermudah bagi pengunjung blog anda sebagai penunjuk tulisan terkait di dalam lebel yang sama, juga sangat berguna sebagai penunjang seo di template blog blogger sobat. Demo berikut langkah dan cara membuat nya: Login ke akun blogger sobat Klik Template ---> Edit template. Cari kode <head> dengan tombol ctrl…

7 komentar

  1. Unknown3 April 2014 pukul 19.19

    bang, agar komentar bisa valid sama kode2 python gimana yah??
    http://python113.blogspot.com/

    BalasHapus
    Balasan
    1. Dafin defandaky4 April 2014 pukul 04.35

      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.

      Hapus
  2. Unknown4 April 2014 pukul 15.11

    saya sudh coba sprti itu bang.. tp kod tetap blm bisa y bang...
    oya... 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....

    BalasHapus
    Balasan
    1. Dafin defandaky6 April 2014 pukul 06.09

      cari di blog ini ada, jelajah semua tutor sob :)

      Hapus
  3. Seribu Kata28 Juni 2014 pukul 05.06

    wau... mati matian saya nyari tutorial seperti ini .
    Trimakasih gan semoga bermanfaat :)

    BalasHapus
    Balasan
    1. Dafin defandaky28 Juni 2014 pukul 05.10

      trik terbaru aja sob, ini sudah kedaluarsa nanti saya update...

      Hapus
    2. Seribu Kata22 Agustus 2014 pukul 11.16

      saya tunggun min yg baru

      Hapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link 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>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...