Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Teks area atau lainnya, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. Dari segi tampilan juga menurut saya lebih rapi dan menarik kaya yang di pake di blog ini nich...Ok sobat blogger gak usah panjang lebar deh basa basinya..mari kita langsung ke pokok pembahasan...eng ing eng.....
Caranya :
- Login Blogger => Rancangan => Edit HTML
- Download Template Lengkap=>centang pada kotak Expand Template Widget
- Cari kode berikut : </head> gunakan aja [CTRL]+[F] biar cepat. . .
- Setelah ketemu copy kode dibawah ini lalu pastekan diatas kode tersebut
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>
- Setelah bagian itu sudah lalu
- Cari lagi kode berikut : </b:skin> gunakan aja [CTRL]+[F] biar cepat. . .
- lalu pastekan kode dibawah ini diatasnya. .
.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
- Setelah itu cari lagi kode yang seperti ini dan letakkan kode dibawah ini diatas kode tersebut
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
- Save template
Untuk pemanggilan nya di edit htlm postingan gunakan kode ini:
UNTUK CODE CSS:
<pre class="css" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>
UNTUK CODE HTML:
<pre class="html" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>
UNTUK CODE JAVASCRIPT:
<pre class="java" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>
BackLink please. Thanks! ^^
| URL |
| Code For Forum |
| HTML Code |
About EDHO-XP Author
Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !
Add Comment For » Cara Membuat Syntax Highlighter Pada Blog
Posting Komentar
Maaf bila Komentar yang belum terbalas /yang request belum bisa terpenuhi karena Admin lagi sibuk banget
- No Spam,No Flood,No Junk,No Iklan,No Sara,No S*x,
- Jangan Ngemis Tempalte Punya EDHO-XP ! karena buatnya susah payah ! baca Disclaimner !
- Dilarang Promosi Agan/Aganwati, Pertamax, Pertamina dsb.
- Gunakan Bahasa yang efektif
- Anda Sopan Kami Segan
- Komentar Alay LANGSUNG admin delete
THANKS!