Jumat, 10 Juni 2011

Membuat Syntax Highlighter vers3.0

Hi kawan Blogger apa kabar? saat ini saya ingin berbagi pengetahuan lagi tentang membuat apa ya? !!! cz soalnya saya sendiri kemarin-kemarin nyari sendiri apa keywoardnya di google susah juga ketemunya soale ga tau namanya!! tapi Alhamdullilah setelah saya temukan saya sekarang tau namanya yaitu "membuat tampilan hightlighter untuk blog" itulah keywordnya! OK langsung aja je TKP (*Tempat kita praktek :p) Untuk membuatnya silahkan login dulu ke Blogger kalian dan kemudian ikuti tahap selanjutnya dibawah ini:
1. Pilih Rancangan --> EDIT HTML (centang expand template widget)
2. Simpan CSS berikut Diatas kode  
]]></b:skin>


/**
* SyntaxHighlighter
* http://alexgorbatchev.com/
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
*
* @version
* 2.1.364 (October 15 2009)
*
* @copyright
* Copyright (C) 2004-2009 Alex Gorbatchev.
*
* @license
* This file is part of SyntaxHighlighter.
*
* SyntaxHighlighter is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* SyntaxHighlighter is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with SyntaxHighlighter. If not, see <http://www.gnu.org/copyleft/lesser.html>.
*/
/************************************
* Default Syntax Highlighter theme.
*
* Interface elements.
************************************/
.syntaxhighlighter
{
background-color: #fff !important;
}
/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
color: black !important;
}
/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
background-color: red !important;
}
/* Gutter line numbers */
.syntaxhighlighter .line .number
{
color: #f7f5f5 !important;
background-color: #c0bfbf !important;
}
/* Add border to the lines */
.syntaxhighlighter .line .content
{
color: #000 !important;
}
.syntaxhighlighter.printing .line .content
{
border: 0 !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: #f5f5f5 !important;
border-top: white solid 5px !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: #f5f5f5 !important;
border-top: white solid 5px !important;
}
.syntaxhighlighter .toolbar
{
background-color: #c0bfbf !important;
}
.syntaxhighlighter .toolbar a
{
color: #a0a0a0 !important;
}
.syntaxhighlighter .toolbar a:hover
{
color: red !important;
}
/************************************
* Actual syntax highlighter colors.
************************************/
.syntaxhighlighter .plain,
.syntaxhighlighter .plain a
{
color: #000 !important;
}
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a
{
color: #008200 !important;
}
.syntaxhighlighter .string,
.syntaxhighlighter .string a
{
color: #0404ab !important;
}
.syntaxhighlighter .keyword
{
color: #cf0202 !important;
font-weight: bold !important;
}
.syntaxhighlighter .preprocessor
{
color: black !important;
}
.syntaxhighlighter .variable
{
color: #a70 !important;
}
.syntaxhighlighter .value
{
color: #d4af02 !important;
}
.syntaxhighlighter .functions
{
color: #ff1493 !important;
}
.syntaxhighlighter .constants
{
color: #2a8506 !important;
}
.syntaxhighlighter .script
{
background-color: yellow !important;
}
.syntaxhighlighter .color1,
.syntaxhighlighter .color1 a
{
color: #d301d1!important;
}
.syntaxhighlighter .color2,
.syntaxhighlighter .color2 a
{
color: #ff1493 !important;
}
.syntaxhighlighter .color3,
.syntaxhighlighter .color3 a
{
color: red !important;
}
3. Sekarang simpan script berikut diatas kode </head>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'></script>

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

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

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


4. Sekarang lanjut ke bagian paling bawah dan cari kode </body>
5. Simpan kode berikut diatas kode </body> tadi

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
6. Simpan Template kalian! Selesai deh hadoh.. lumayan sulit jga ya!! :)

Untuk pemanggilannya pada postingan, kalian silahkan menggunakan kode berikut :

1. untuk menyimpan css
<pre class="brush: css;">
SIMPAN CSS YANG AKAN DIPASANG DISINI
</pre>

2. Untuk menyimpan Js
<pre class="brush: js;">
SIMPAN Script Js YANG AKAN DIPASANG DISINI
</pre>


Catatan :
Lakukan langkah No.1, 2 pada tahap pemasangan setiap kalian membuat postingan dan ingin menampilkan kode-kode pada postingan kalian.


Selesai dech..... Semoga bermanfaat ya ...

Yang Punya Syntax Highlighter : Alex Gorbatchev | http://alexgorbatchev.com/SyntaxHighlighter/

 
<head>Mantap GAN ya PUyeng Sirah hehe!</head>
HeuU!!^^

Reaksi:

0 komentar:

Posting Komentar

WARNING !
Komentar anda tidak boleh mengandung unsur:
1.Penghinaan, Rasis dan Pelecehan
2.Spamming (Spam Comments)
3.Link Iklan, ads etc
Terima Kasih.


Jika ada request ato laporan tentang :
1.Request Software atau Tutorial
2.Bad Link & Re-active link (akibat broken link)
Silakan comment di bawah atau kirim pesan ke saya via facebook >> Akunku : Adhieresthenes Hier Banu Arfakhshad