Cara Memasang Syntax Highlighter di Blogger Yang Tidak Ribet

Cara Memasang Syntax Highlighter di Blogger Yang Tidak Ribet

Cara Memasang Syntax Highlighter di Blogger Yang Tidak Ribet - Syntax Highlighter adalah merupakan suatu penanda untuk menandai kode-kode yang akan anda postingkan di dalam blog ,dengan penerapan syntax highlighter ini akan mempermudah pembaca dan dapat mengetahui mana postingan kode dan tulisan biasa . 


Syntax Highlighter di Blogger


Sebagai contoh jika saya membuat postingan kode HTML ,CSS ,atau Javasciprt jika tidak menggunakan syntax highlighter maka tampilan akan seperti berikut :

Contoh Postingan Code Tanpa Syntax Highlighter

<script type="text/javascript"> function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig"&amp;");replaced = replaced.replace(/</ig"&lt;");replaced = replaced.replace(/>/ig"&gt;");replaced = replaced.replace(/"/ig"&quot;");replaced = replaced.replace(/&#177;/ig"&plusmn;");replaced = replaced.replace(/&#169;/ig,"&copy;");replaced = replaced.replace(/&#174;/ig"&reg;");replaced = replaced.replace(/ya'll/ig"ya'll");ele1.value = replaced;} </script>  <table style="margin: 0 auto;"><tbody>

Contoh Postingan Memakai Syntax Hightlighter

<script type="text/javascript"> function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig"&amp;");replaced = replaced.replace(/</ig"&lt;");replaced = replaced.replace(/>/ig"&gt;");replaced = replaced.replace(/"/ig"&quot;");replaced = replaced.replace(/&#177;/ig"&plusmn;");replaced = replaced.replace(/&#169;/ig,"&copy;");replaced = replaced.replace(/&#174;/ig"&reg;");replaced = replaced.replace(/ya'll/ig"ya'll");ele1.value = replaced;} </script>  <table style="margin: 0 auto;"><tbody>
Dari contoh di atas terlihat lebih jelas mana kode dan tulisan postingan biasa ,jadi akan mempermudah bagi anda yang mempunyai blog tutorial untuk memberikan tutorial yang menggunakan kode . Jika anda ingin menerapkan kode syntax hightlighter sebagai berikut :

Cara Pemasangan Syntax Hightlighter Tidak Ribet

1. Anda login ke blogger.com
2. Klik tab Template > Edit HTML
3. CTRL + F cari ]]</b:skin> atau </style>
4. Masukan CSS berikut di atas ]]</b:skin> atau </style>
/* Syntax Highlighter */ pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;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;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto} pre.line-number{background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none} pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute} pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white} pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} 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:#bbbb6d} pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block} pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px} pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3} 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:#D94CEA} pre .deletion{color:#dc322f} pre .tex .formula{background:#073642}
5. CTRL + F </head>
6. Copy kode javascript berikut simpan di atas </head>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/> <script> hljs.initHighlightingOnLoad(); </script>
7. pilih Simpan Template


Cara Menggunakan / Pemanggilan Syntax Hightlighter

Cara menggunakan syntax hightlughter ini tida terlalu sulit anda tinggal menuliskan kode HTML ,CSS atau Javascript di tengah kode
<pre><code> kode html ,css atau javascript di sini </code></pre>

Jangan sampai kebalik ya saat menempatkan pemanggil nya agar syntax nya bekerja 
Nah demikian cara memasang syntax hightlighter tidak terlalu sulit bukan ,jika kuran gmengerti silahkan tanyakan .


Source :http://www.ficripebriyana.com

No comments

Silahkan berikan opini atas artikel saya jika ada saran silahkan sampaikan melalui komentar

Advertiser