Cara Pasang Kawasan Script Di Blog Yang Keren

Pada kesempatan kali ini aku ingin menyebarkan tutorial Cara Memasang Prism Syntax Highlighter Pada Posting Blog yang tak hanya tampak menarik namun juga profesional , Prism Syntax Highlighter ini yaitu sebuah fitur yang memang dibentuk bagi teman yang ingin menyebarkan script atau isyarat terkait pebuatan widget atau hanya ingin menyebarkan isyarat saja.

Prism Syntax Highlighter berupa border teks isyarat (Pre Code) yang umumnya dipakai sebagai sarana menyebarkan isyarat script ibarat HTML, CSS, JavaScript, JQuery.Fitur ini menawarkan kesan yang menarik,simple,clean( higienis ).

Bagi kalian yang ingin mencoba memasang Prism Syntax ini (kotak daerah script pada blog). Ikuti langkah - langkah nya sebagai Berikut.

1. Letakkan isyarat CSS di bawah ini, di atas tag </style> pada Tema editor Template HTML blog Anda.

 /* CSS Prism Syntax Highlighter */ pre {     padding: 50px 10px 10px 10px;     margin: .5em 0;     white-space: pre;     word-wrap: break-word;     overflow: auto;     background-color: #2c323c;     position: relative;     border-radius: 4px;     max-height: 500px; }  pre::before {     font-size: 16px;     content: attr(title);     position: absolute;     top: 0;     background-color: #eee;     padding: 10px;     left: 0;     right: 0;     color: #fff;     text-transform: uppercase;     display: block;     margin: 0 0 15px 0;     font-weight: bold; }  pre::after {     content: 'Double click to selection';     padding: 2px 10px;     width: auto;     height: auto;     position: absolute;     right: 8px;     top: 8px;     color: #fff;     line-height: 20px;     transition: all 0.3s ease-in-out; }  pre:hover::after {     opacity: 0;     top: -8px;     visibility: visible; }  code {     font-family: Consolas,Monaco,'     Andale Mono','Courier New',Courier,Monospace;     line-height: 16px;     color: #88a9ad;     background-color: transparent;     padding: 1px 2px;     font-size: 12px; }  pre code {     display: block;     background: none;     border: none;     color: #e9e9e9;     direction: ltr;     text-align: left;     word-spacing: normal;     padding: 0 0;     font-weight: bold; }  code .token.punctuation {     color: #ccc; }  pre code .token.punctuation {     color: #fafafa; }  code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {     color: #777; }  code .namespace {     opacity: .8; }  code .token.property,code .token.tag,code .token.boolean,code .token.number {     color: #e5dc56; }  code .token.selector,code .token.attr-name,code .token.string {     color: #88a9ad; }  pre code .token.selector,pre code .token.attr-name {     color: #fafafa; }  pre code .token.string {     color: #40ee46; }  code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {     color: #ccc; }  code .token.operator {     color: #1887dd; }  code .token.atrule,code .token.attr-value {     color: #009999; }  pre code .token.atrule,pre code .token.attr-value {     color: #1baeb0; }  code .token.keyword {     color: #e13200;     font-style: italic; }  code .token.comment {     font-style: italic; }  code .token.regex {     color: #ccc; }  code .token.important {     font-weight: bold; }  code .token.entity {     cursor: help; }  pre mark {     background-color: #ea4f4e!important;     color: #fff!important;     padding: 2px;     border-radius: 2px; }  code mark {     background-color: #ea4f4e!important;     color: #fff!important;     padding: 2px;     border-radius: 2px; }  pre code mark {     background-color: #ea4f4e!important;     color: #fff!important;     padding: 2px;     border-radius: 2px; }  .comments pre {     padding: 10px 10px 15px 10px;     background: #2c323c; }  .comments pre::before {     content: 'Code';     font-size: 13px;     position: relative;     top: 0;     background-color: #f56954;     padding: 3px 10px;     left: 0;     right: 0;     color: #fff;     text-transform: uppercase;     display: inline-block;     margin: 0 0 10px 0;     font-weight: bold;     border-radius: 4px;     border: none; }  .comments pre::after {     font-size: 11px; }  .comments pre code {     color: #eee; }  .comments pre.line-numbers {     padding-left: 10px; }  pre.line-numbers {     position: relative;     padding-left: 3.0em;     counter-reset: linenumber; }  pre.line-numbers > code {     position: relative; }  .line-numbers .line-numbers-rows {     height: 100%;     position: absolute;     pointer-events: none;     top: 0;     font-size: 100%;     left: -3.5em;     width: 3em;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     padding: 0; }  .line-numbers-rows > span {     pointer-events: none;     display: block;     counter-increment: linenumber; }  .line-numbers-rows > span:before {     content: counter(linenumber);     color: #999;     display: block;     padding-right: 0.8em;     text-align: right;     transition: 350ms; }  pre[data-codetype='CSSku']:before {     background-color: #00a1d6; }  pre[data-codetype='HTMLku']:before {     background-color: #3cc888; }  pre[data-codetype='JavaScriptku']:before {     background-color: #75d6d0; }  pre[data-codetype='JQueryku']:before {     background-color: #e5b460; }

2. Kemudian di atas tag </body> Anda tambahkan isyarat di bawah ini.

 <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/> 

 <script> $('pre').attr('class', 'line-numbers'); Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) </script>  <script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;); for (var i = 0; i &lt; pres.length; i++) {   pres[i].addEventListener(&quot;dblclick&quot;, function () {     var selection = getSelection();     var range = document.createRange();     range.selectNodeContents(this);     selection.removeAllRanges();     selection.addRange(range);   }, false); } </script> 

3. Simpan/Save Template Blog Anda. Kemudian bagaimana cara penulisan Prism Syntax ini?
Ketika anda menulis sebuah tutorial, slahkan ditulis terlebih dahulu. Kemudian jikalau selesai, gunakan mode penulisan HTML. Lihat di kiri judul postingan, ada COMPOSE dan HTML. Anda pilih HTML. Kemdian gunakan Code di bawah ini, dan Ganti Kode anda dengan scritp yang ingin di bagikan.

 <pre title="Cara Pasang Tempat Script di Blog Yang Keren" data-codetype ="HTMLku"><code class="language-markup"> ... isyarat HTML (yang sudah di`Parse`) di sini ... </code></pre>  <pre title="Cara Pasang Tempat Script di Blog Yang Keren" data-codetype ="CSSku"><code class="language-css"> ... isyarat CSS anda di sini yangsudah di parse ... </code></pre>   <pre title="Cara Pasang Tempat Script di Blog Yang Keren" data-codetype ="JavaScriptku"><code class="language-javascript"> ... isyarat JavaScript anda di sini ... </code></pre>  <pre title="Cara Pasang Tempat Script di Blog Yang Keren" data-codetype ="JQueryku"><code class="language-javascript"> ... isyarat jQuery anda di sini ... </code></pre> 

Untuk isyarat HTML dan Javascript, sebelum isyarat diletakkan ketika menulis,Anda harus escape atau Parse Kode tersebut terlebih dahulu. Untuk Parse HTML/Javascript dapat mengunjungi halaman: Parse HTML. Praktis bukan? Semoga dapat memperindah blog Anda.

Contoh tampilan nya ibarat gambar dibawah ini, klik gambar untuk zoom :


Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini, biar artikel ini dapat bermanfaat buat teman yang sedang mencari Cara Memasang Prism Syntax Highlighter Pada Posting Blog. Salam blogger!