Saturday, March 3, 2012

Syntax HighLighter Untuk Blog

Taukah kalian maksudnya Syntax HighLighter ?
Baiklah,biar saya jelaskan sedikit artinya
Artinya apa ya hmm tunggu sebentar
Hmm bagaimana aku bisa lupa
aa tunggu sebentar ya aku ingat-ingat dulu
apa yaa.. ?
Ooo.. ya.. aku baru ingat sekarang XD
Syntax Highlighter bisa dikatakan juga kembaran dari blockqoute.
Namun untuk yg satunya ini,lebih modern lo daripada blockquote..
Atau sobat bisa liat screen shotnya nih :


Pengen mencobanya ?
Langsung saja pakek niih scriptnya.
Eh lupa,pertama tama kita simak dulu tutorial cara memasangnya di blog
Baiklah ini dia :

  • Pertama login ke akun blogger sobat masing masing
  • Dasbor > Rancangan > Edit Html
  • Kemudian sobat cari code </head>
  • Lalu copi code berikut ini dan pastekan di atas code </head>

<!-- Add-in CSS for syntax highlighting -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- Add-in Script for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- End code hilight -->

  • Jika sudah,sobat klik simpan kemudian kembali lagi kerancangan
#--------------------------------------------------------------------------------------------------#
Dan untuk code pemanggilnya,silahkan simak tutornya berikut ini :
#--------------------------------------------------------------------------------------------------#
Untuk memasang code pemanggilnya,silahkan sobat pasang code pemanggilnya ini di tab edit html postingan.
Untuk newbie bagi yg blom paham
Dasbor > Rancangan > Posting > klik tab Edit Html
Ok,berikut ini script code pemanggilnya :

<pre class="brush:css">
Isi code css
</pre>


<pre class="brush:javascript">
Isi code javascript
</pre>


<pre class="brush:hmtl">
Isi code html
</pre>

Untuk itu cukup sampai disini tutorialnya
semoga sobat sekalian benar benar paham dalam menyimak tutorial ini :D
Amiin ya rabbal alamien :D

Comments
9 Comments

Lihat,siapa siapa saja yang berkomentar dibawah ini *bukan diatas ._."

  • Anonymous

    mantab ndan . . . ijin praktekin . . . cmiwwww

  • Wih-wih ~! Ada Tutor Baru Nih ^^
    . Izin Coba Bang Spartan, xixixi

  • Sesuatu Banget Nih Infonya... I Like This.... Nasi Info wkwkkwkw

  • @galih : wekekekek gak juga XD
    @putra : hehe monggo :D

  • Baca Peraturan Sebelum Berkomentar :


    - Dilarangkan untuk menulis atau mengisi komentar yang berbentuk SPAM

    - Dilarangkan untuk menulis atau mengisi komentar yang berhubungan dengan SARA

    - SOPAN dalam berkomentar

    - Dilarangkan mabuk dalam agama *gak nyambung

    - Selalu waspada saat berkendara * hampir parah

    - Orang pintar, minum tolak angin *semakin parah

    Baca Yang Ini :

     
    CaeSparta ™ | Layout Dari Blogger | Didesign Oleh Caesar Rendra | Sedikit Terinspirasi Dari Lupa Siapa xD | Sebuah Inspirasi Menjadi Kreatifitas

    Warning !!

    This Is Sparta.. !!