 |
| syntax blog |
Setelah sebelumnya sudah memposting cara Kotak kode atau Syntax Highlighter seperti arlina, kali ini adalah cara membuat sintax full features dari blog bule
baik langsung saja berikut langkah-langkahnya:
1. Masuk Laman Template edit HTML
Seperti biasa jika mau merubah template maka masuk laman edit HTML.
kemudian letakan javascript di bawah ini tepat diatas kode </head>
<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>2. Menerapkan CSS Syntax Highlighter
Unttuk memasang kode CSSnya copy kode berkut dan letakan di atas ]]></b:skin>
.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}
3. menerapkan Java Script Syntaxuntuk memasang java scriipt syntax anda cari terlebih dahulu kode </body>. letakan kode berikut diatas kode </body>
<!-- Add-in Script for syntax highlighting -->
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
4. Membuat Postingan dengan Syntax atau Kotak Kode
a. Kode Syntax untuk Java Script
<pre class="JScript" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre>
b. Kode Syntax untuk CSS
<pre class="CSS" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre>c. Kode Syntax untuk HTML
<pre class="HTML" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre>d. Kode Syntax untuk Jquery
<pre class="JQuery" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre>Selesai...
demikian cara membuat syntax highlighter. baca juga cara membuat kotak Kode post blog
