Caranya
pemasangannya hampir sama seperti biasanya, tutorial ini sebenarnya punya maz
Saeful, dan dia sendiri yang modifikasinya. Bagi yang tertarik memasangnya
silahkan simak tutorialnya:
Pertama
cari kode </head> dan pasang Jquery dibawah ini tepat diatasnya
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Dan
bilamana di template sobat sudah terpasang Jquery lebih baik abaikan saja Jquery
di atas dan langsung ke tutorial berikutnya.
Kedua
pasang JavaScript dibawah ini diatas kode </head>
<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>
Kemudian
tambahkan kode CSS di bawah ini untuk memperindah tampilannya/*Syntax Highlighter*/ pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px} code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14} #comments code{color:#e59304;} pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block} pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F} pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold} pre .deletion{color:#dc322f} pre .tex .formula{background:#eee8d5} Dan yang terakhir cara peasangan untuk tampil kode dikomentar blog
Silahkan
copy kode dibawah ini diatas kode </body>
/*Tag Pre*/ code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px} pre code,i[rel="pre"]{display:block;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px;overflow:auto;max-height:200px}
Terakhir
simpan template
Semoga
bermanfaat sob
Sumber:
Mas Saeful
0 komentar