Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat JQuery-Prettify Sintax Highlighter

Syntax Highlighter atau Syntax Highlighting merupakan sebuah fungsi yang terbangun dari javascript dan kode css yang mampu menciptakan pewarnaan pada posting kode html. Pemanfaatan syntax highlighting akan membuat sebuah posting dalam bentuk kode html menjadi lebih mudah dipahami/dicermati karena beberapa kode tertentu mempunyai warna yang saling berbeda. Sebagai contoh hasil pemanfaatan syntax highlighter sampeyan bisa melihatnya dari beberapa kode HTML baik yang berupa kode css, javascript ataupun xHTML yang terposting di blog ini. Meskipun sebenarnya ada cukup banyak syntax highlighter atau syntax highlighting yang dikenal dan bisa dimanfaatkan untuk melengkapi blog, namun untuk kali ini kita akan utamakan Prettify Syntax Highlighting dengan pertimbangan penggunaan javascript yang terbilang relatif paling ringan dengan beban tak lebih dari 13kbyte. Untuk membuat javascript dan kode CSS bisa bekerja menciptakan kode html dalam tampilan berbagai warna, kita hanya memerlukan tambahan jquery-1.3.2.js atau jQuery-1.3.2.min.js.

Cara Membuat Prettify Syntax Highlighter

  1. Download seluruh kode : Download javascript dan kode CSS yang sudah dalam bentuk link dan siap pakai dengan cara KLIK link di bawah ini :


  2. Login to Blogger/Login ke BloGGer : Tuliskan User Name/Nama Pengguna atau Email Address dan Password/Sandi. Lanjutkan dengan KLIK Login.
  3. Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
  4. Design/Rancangan : KLIK link "Edit HTML".
  5. Edit HTML : Lakukan "Backup Template" dengan KLIK "Download Full Template/Download Template Lengkap", kemudian "Save/Simpan" file template di "Folder PC".
  6. Tetap di Edit HTML : Find HTML Code/Cari kode HTML "<head>.
  7. Copy-Paste : Copy seluruh kode "hasil Download" dan pastekan di atas kode <head>.
  8. Find HTML Code/Cari Kode HTML : Cari Kode </body> dan letakkan kode berikut tepat di atasnya. Kode dan posisinya adalah seperti berikut :
  9. <script type='text/javascript'>
    jQuery(function($){
    prettyPrint();
    });
    </script>

    </body>
  10. SAVE Template/Simpan Template : KLIK "SAVE Template/Simpan Template"

Bentuk pemasangan link jquery-1.3.2.min.js, prettify.js dan prettify.css di atas kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/gubhugreyot/.../bgsGR_prettify-min.js' type='text/javascript'/>
<link href='http://h1.ripway.com/gubhugreyot/.../prettify.css' rel='stylesheet' type='text/css'/>
<head>

Cara Menggunakan kode HTML di Posting

Untuk Penulisan Kode CSS

<pre class="prettyprint lang-css"><div class="pretty">
Tuliskan Kode CSS di sini
</div></pre>

Contoh Penulisan

<pre class="prettyprint lang-css><div class="pretty">#jtips{
max-width:230px;;
font-family:Arial;
font-size:11px;
color:#fbf7be;
text-align:center;
text-shadow:0px 1px 0px #aca99e;
padding: 10px 0 30px 0;
position:absolute;
border:5px solid #ccc;
}
</div></pre>

Untuk Penulisan Script/Javascript

<pre class="prettyprint lang-js"><div class="pretty">
Tuliskan script/javascript di sini!
</div></pre>

Contoh Penulisan

<pre class="prettyprint lang-js><div class="pretty">&lt;script type='text/javascript'&gt;
jQuery(function($){
prettyPrint();
});
&lt;/script&gt;
</div></pre>

Untuk Penulisan Kode HTML

<pre class="prettyprint lang-html"><div class="pretty">
Tuliskan Kode xTML di sini!
</div></pre>

Catatan/Keterangan :

  1. Sampeyan dapat menambahkan style="height:...px;" pada :
    <pre class="prettyprint lang-..." style="height:...px;">
    apabila kode cukup banyak hingga ketinggian harus dibatasi/diatur
  2. Penulisan xHTML seperti halnya penulisan pada kode css atau javascript.
  3. Untuk merubah beberapa variabel dalam prettify syntax highlighter dilakukan dengan merubah kode css.
  4. Apabila di template sampeyan terdapat kode css yang berupa syntax (kode) pre { .....} (bawaan template), hapus kode tersebut karena syntax "pre" telah disertakan di dalam kode css hasil download.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

4 komentar:

  1. Manstaffffff..... belum nyampe nih!!!!!!!!
    selamat malam pak

    BalasHapus
  2. Link download script dilaporkan sebagai situs penyerang

    BalasHapus
  3. Wow mantab banget bro... thx

    BalasHapus

 
GR | Edited by | gubhug reyot