Sunday, May 13, 2012

Highlight Blogger [old version]

Apa itu syntax highlight, temen - temen pasti tau, kalau kita search code program, atau kebetulan menemukan kode program yang tampil didalam blog atau website kok bisa tampil di blog/web, tanpa memepengaruhi tampilan blog tersebut, bahkan kita dapat mengcopy paste code program tersebut tanpa ada kesalahan penulisan program, itulah namanya highlight, jadi highlight adalah salah satu cara bagaimana kita memposting kode program kedalam web/blog dengan tampilan yang begitu menawan dan tidak merusak tampilan blog kita, seperti contoh gambar dibawah ini, tampilan code yang kita posting didalam blog kita dapat tampil semanis madu, hehehe... semanis gambar dibawah ini pastinya... Syntax highlight ini memake Highlight Gorbatchev version 1.5.2 [old version]

yang saya lingkari hitam, disitu kita bisa mengklik dan mengcopy source code yang kita posting tadi tanpa tercopy line numbernya.
apabila kita klik view plain maka akan tampil window baru yang berisi source code aslinya, atau dapat kita lihat seperti contoh gambar dibawah.


Caranya, agar bisa tampil seperti itu bagaimana...

1. Menuju ke dashboard blogger --> Template --> Edit Html --> Lanjutkan
   [Cara yang saya gunakan menggunakan tampilan blogger versi baru]
Maka kita akan dibawa ke window edit template melalui html, atau seperti gambar dibawah.
Centang Expand Template Widget, 

2. Menuju halaman css copy paste seluruh isi css tersebut kedalam source code edit HTML diantara code berikut:


3. Apabila langkah nomor 2 sudah dilakukan, copy pastekan code berikut :














pastekan diatas syntax </head> kode diatas digunakan untuk menggenerate source code yang akan ditampilkan, apabila temen - temen pengen blognya ringan dan simple, gk mau masukin berbagai macam script, hanya pengen masukin java saja, maka source code tersebut dapat di delete sesuai kebutuahan temen - temen, ingat pastekan diatas :


4. Apabila langkah 3 sudah berhasil dijalankan, kita copy pastekan script berikut :

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

copykan script tersebut diatas tag </body> script tersebut berguna untuk memanggil method sehingga tampilan source code bisa ditampilkan:


Apabila semuanya sudah Simpan Template

5. Apabila kita ingin memposting halaman yang menggunakan source code program, kita tinggal memanggil class source code tersebut.
pergi ke menu posting ada 2 pilihan, compose dan html. untuk memposting source code gunakanlah html, apabila ingin menulis karakter biasa, pindahkan ke compose,
script untuk pemasangan source code, yang akan dimasukan melalui pilihan html :

Setiap kita akan memosting source code, gunakan script diatas, mudah bukan... kalau mau mencoba highlight versi terbaru disini


Dilarang Keras copas article :D

0 komentar:

Post a Comment