Unknown
proBlogiz
Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.
Kali ini Problogiz, ingin sharing koleksi Syntax Highlight yang keren dengan CSS dan Javascript khusus untuk Blogger. Ada 10 koleksi SyntaxHighlighter keren yang saya kumpulkan dari sumbernya softwaremaniacs.org, yang dapat Anda gunakan free untuk menampilkan source code (kode box) di blog-blog Anda. Memang ada banyak artikel atau situs yang berbagi kode dan cara memasang SyntaxHighlighter di halaman blog/website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainnya. Saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).
HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code, yang paling sering digunakan oleh blogger (dalam tutorial blog-nya) untuk menampilkan source code, yaitu kode CSS, Javascript, dan mark up HTML. Dan 10 style theme Syntax Highlight pilihan untuk Sobat Blogger!!
Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)
1. Untuk mengaktifkan fitur ini dibutuhkan javascript berikut, yang dapat Anda letakkan di template tepat diatas tag </head> atau bisa juga sebelum tag </body>.
<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2. Kemudian dilanjutkan meletakan style highlighting (CSS), pilihlah salah satu dari 10 macam style dibawah ini (lihat Demo Live-nya sebelum memutuskan) mana yang cocok untuk Blog Sobat. Copy Kode CSS-nya (klik 2x untuk select all) dan letakkan tepat diatas tag ]]></b:skin>, lalu Simpan Template.
3. Gunakan mark up HTML berikut. untuk menerapkan SyntaxHighlighter pada source code di halaman postingan Anda:
<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini......
</code></pre>10 Koleksi SyntaxHighlighter Keren di Blogger
1. Pojoaque
Kode CSS:
/*
Pojoaque Style by Jason Tate
http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #b58900;
}
pre .css .attribute {
color: #b89859;
}
pre .css .number,pre .css .hexcolor{
color: #DCCF8F;
}
pre .css .class {
color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
color: #cb4b16;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}
2. Solarized - Dark
Kode CSS:
/*
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull
*/
pre code {
display: block; padding: 0.5em;
background: #002b36; color: #839496;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id {
color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #b58900;
}
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 {
color: #cb4b16;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}
3. School Book
Kode CSS:
/*
School Book style from goldblog.com.ua (c) Zaripov Yura
*/
pre code {
display: block; padding: 15px 0.5em 0.5em 30px;
font-size: 11px !important;
line-height:16px !important;
}
pre{
background:#f6f6ae url('https://sites.google.com/site/problogiz/home/school_book.png');
border-top: solid 2px #d2e8b9;
border-bottom: solid 1px #d2e8b9;
}
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
color:#005599;
font-weight:bold;
}
pre code,
pre .subst,
pre .tag .keyword {
color: #3E5915;
}
pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .nginx .built_in,
pre .tex .command {
color: #2C009F;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket {
color: #E60415;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .xml .tag .title,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command,
pre .request,
pre .status {
font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
4. Rainbow
Kode CSS:
/*
Style with support for rainbow parens
*/
pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }
pre code {
display: block; padding: 0.5em;
background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
color: #969896;
font-style: italic;
}
pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
color: #cc99cc;
}
pre .number { color: #f99157; }
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #8abeb7;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
color: #b5bd68;
}
pre .class .keyword
{
color: #f2777a;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
color: #ffcc66;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
font-weight: bold;
}
pre .attribute,
pre .clojure .title {
color: #81a2be;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
color: #f99157;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #eee8d5;
}
5. Monokai
Kode CSS:
/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/
pre code {
display: block; padding: 0.5em;
background: #272822;
}
pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
color: #F92672;
}
pre code {
color: #DDD;
}
pre code .constant {
color: #66D9EF;
}
pre .class .title {
color: white;
}
pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
color: #BF79DB;
}
pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
color: #A6E22E;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
color: #75715E;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
6. Tommorow Night Blue
Kode CSS:
/* Tomorrow Night Blue Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
color: #7285b7;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
color: #ff9da4;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
color: #ffc58f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
color: #ffeead;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
color: #d1f1a9;
}
.tomorrow-aqua, pre .css .hexcolor {
color: #99ffff;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
color: #bbdaff;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
color: #ebbbff;
}
pre code {
display: block;
background: #002451;
color: white;
padding: 0.5em;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
7. Brown Papper
Kode CSS:
/*
Brown Paper style from goldblog.com.ua (c) Zaripov Yura
*/
pre code {
display: block; padding: 0.5em;
background:#b7a68e url(('https://sites.google.com/site/problogiz/home/brown_papersq.png');
}
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special,
pre .request,
pre .status {
color:#005599;
font-weight:bold;
}
pre code,
pre .subst,
pre .tag .keyword {
color: #363C69;
}
pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .number {
color: #2C009F;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula {
color: #802022;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command {
font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.8;
}
8. Sunburst
Kode CSS:
/*
Sunburst-like style (c) Vasily Polovnyov
*/
pre code {
display: block; padding: 0.5em;
background: #000; color: #f8f8f8;
}
pre .comment,
pre .template_comment,
pre .javadoc {
color: #aeaeae;
font-style: italic;
}
pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
color: #E28964;
}
pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
color: #99CF50;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
color: #65B042;
}
pre .subst {
color: #DAEFA3;
}
pre .regexp {
color: #E9C062;
}
pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
color: #89BDFF;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
text-decoration: underline;
}
pre .symbol,
pre .ruby .symbol .string,
pre .number {
color: #3387CC;
}
pre .params,
pre .variable,
pre .clojure .attribute {
color: #3E87E3;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
color: #CDA869;
}
pre .css .class {
color: #9B703F;
}
pre .rules .keyword {
color: #C5AF75;
}
pre .rules .value {
color: #CF6A4C;
}
pre .css .id {
color: #8B98AB;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
color: #9B859D;
}
pre .preprocessor {
color: #8996A8;
}
pre .hexcolor,
pre .css .value .number {
color: #DD7B3B;
}
pre .css .function {
color: #DAD085;
}
pre .diff .header,
pre .chunk,
pre .tex .formula {
background-color: #0E2231;
color: #F8F8F8;
font-style: italic;
}
pre .diff .change {
background-color: #4A410D;
color: #F8F8F8;
}
pre .addition {
background-color: #253B22;
color: #F8F8F8;
}
pre .deletion {
background-color: #420E09;
color: #F8F8F8;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
9. Google Code
Kode CSS:
/*
Google Code style (c) Aahan Krish
*/
pre code {
display: block; padding: 0.5em;
background: white; color: black;
}
pre .comment,
pre .template_comment,
pre .javadoc,
pre .comment * {
color: #800;
}
pre .keyword,
pre .method,
pre .list .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tag .title,
pre .setting .value,
pre .winutils,
pre .tex .command,
pre .http .title,
pre .request,
pre .status {
color: #008;
}
pre .envvar,
pre .tex .special {
color: #660;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .regexp {
color: #080;
}
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .ini .title,
pre .shebang,
pre .prompt,
pre .hexcolor,
pre .rules .value,
pre .css .value .number,
pre .literal,
pre .symbol,
pre .ruby .symbol .string,
pre .number,
pre .css .function,
pre .clojure .attribute {
color: #066;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .typename,
pre .tag .attribute,
pre .doctype,
pre .class .id,
pre .built_in,
pre .setting,
pre .params,
pre .variable,
pre .clojure .title {
color: #606;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .subst {
color: #000;
}
pre .css .class, pre .css .id {
color: #9B703F;
}
pre .value .important {
color: #ff7700;
font-weight: bold;
}
pre .rules .keyword {
color: #C5AF75;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
color: #9B859D;
}
pre .preprocessor,
pre .preprocessor * {
color: #444;
}
pre .tex .formula {
background-color: #EEE;
font-style: italic;
}
pre .diff .header,
pre .chunk {
color: #808080;
font-weight: bold;
}
pre .diff .change {
background-color: #BCCFF9;
}
pre .addition {
background-color: #BAEEBA;
}
pre .deletion {
background-color: #FFC8BD;
}
pre .comment .yardoctag {
font-weight: bold;
}
10. GitHub
Kode CSS:
/*
github.com style (c) Vasily Polovnyov
*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
Selamat Mencoba!!
Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.
Salaam,
2 komentar:
Selamat Mencoba!!
Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.
ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Posting Komentar
Terimakasih telah membaca artikel di atas. Silahkan berkomentar sesuai topik bahasan. Apabila belum tahu cara berkomentar di blog ini, klik TERM
TermKonversi KodeForum