Breaking News
Loading...
Minggu, 06 Januari 2013

Cara Menampilkan SourceCode dipostingan

16.14
Tentu sobat tau dengan source code ?? nah pasti sobat blogger pahamkan dengan source code.namun kita tahu bahwa blogspot tidak lah mudah mempostingkan source code dibandingkan dengan Website lain berbasis CMS ataupun Custom.nah untuk mempostingkan source code diblog dibutuhkan yang namanya syntax highlighter. syntax highlighter merupakan suatu fitur dari text editor, khususnya editor source code, html, php atau bahasa pemrograman apapun sehingga berbeda dengan tulisan lain di sekitarnya. Fungsinya untuk memudahkan programmer dalam membaca dan menganalisa source code tersebut.

Fungsi syntax highlighter sebenarnya tidak jauh beda dengan Blockquote, hanya saja syntax highlighter ini tampilannya membedakan dari tulisan yang lainnya, namun syntax highlighter  ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh JQuery.

Fasilitas dari Syntax highlighter ini, antara lain:
  •     Adanya fasilitas print untuk kode.
  •     Adanya fasilitas view source yaitu membuka barisan kode dalam popup windows.
  •     Dan ada 8 jenis theme yang bisa kamu gunakan.
Langkah - Langkah membuat Syntax highlighter :
  1. login Ke blogger
  2. Pilih tab Template / Design > Edit HTML
  3. Kemudian cari kode <head> ( dengan ctrl+f )
  4. Copy kode di bawah ini dan pastekan di bawah kode: <head>
  5. <link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
    <script src='http://tutorialforyou.googlecode.com/files/shCore.js' type='text/javascript'/>
    <script src='http://tutorialforyou.googlecode.com/files/shBrushCss.js' type='text/javascript'/>
    <script src='http://tutorialforyou.googlecode.com/files/shBrushJScript.js' type='text/javascript'/>
    <script src='http://tutorialforyou.googlecode.com/files/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all();
    </script>
    

  6. Setelah itu Save Template.
  7. cara menggunakannya, copy kode dibawah ini
  8. <pre class='brush:js'>
    LETAKAN KODE SCRIPT YANG AKAN DIPASANG DISINI
    </pre>   
    
  9. bikin postingan > klik tab HTML > pastekan kode tersebut > dan klik tab Compose yang ada disebelah HTML > selesai.
Cara mengganti theme pilih salah satu dari 6 jenis theme yang ingin kamu pasang, 
misalnya Theme Emacs seprti dibawah ini sobat ganti dengan theme yang ada dibawah

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

Pilih themenya dibawah ini :
  1. Theme R Dark
  2. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
    
  3. Theme Midnight
  4. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
    
  5. Theme MDUltra
  6. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMDUltra.css' rel='stylesheet' type='text/css'/>
    
  7. Theme FadeToGrey
  8. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
    
  9. Theme Emacs
  10. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
    
  11. Theme Eclipse
  12. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
    
  13. Theme Django
  14. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
    
Semoga Bermanfaat

0 komentar :

Posting Komentar

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode ⇨ [code]KODE ANDA[/code]
Untuk menyisipkan quote ⇨ [blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar ⇨ [img]URL Gambar[/img]
Untuk menyisipkan video ⇨ [youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
Toggle Footer