Memasang Kotak Kode CSS Syntax Highlighter Dalam Postingan

Cara Memasang Kotak Kode CSS Syntax Dalam Postingan - Saat anda akan memodikasi template, mungkin umumnya saat melakukan browsing anda sering menjumpai web atau blog yang meletakkan kode script HTML atau CSS pada sebuah kotak.

Kotak kode script tersebut membuat isi artikel terlihat rapi atau terstruktur dengan baik. Selain itu kotak kode tersebut memudahkan para pembaca lebih mudah dalam menyalin kode script yang disediakan.

Kotak kode tersebut sangat mudah untuk di pasang di blog anda. Namun jenis kotak kode yang ada banyak jenisnya, seperti yang saya pakai ini.

Cara memasang Kotak Kode Keren

Kotak kode yang saya pakai tidak terlalu ribet pemasangannya, namun jika anda ingin memasang kotak kode yang lebih bagus dari yang saya pakai, anda hanya tinggal ikuti cara dibawah ini.

Berikut adalah tutorialnya :

1. Masuk ke Blogger
2. Pilih Tema atau Template
3. Cadangkan atau backup dulu template mu
4. Klik edit HTML
5. Cari kode ]]</b:skin>
Untuk mencari kode diatas anda tekan tombol CTRL+F dan masukan kode ]]</b:skin>
6. Copas kode dibawah ini selanjutnya paste diatas kode ]]</b:skin>

/* CSS Syntax Highlighter https://www.faizan.com */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}

pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}

pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}

pre:after{display:inline-block;content:"f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}

pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}

code .token.important {font-weight:bold;}

code .token.entity {cursor:help;}

pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}

pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,

pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

7. Kemudian masukan kode dibawah ini tepat diatas kode </body>
<script src='https://librasbr.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>

8. Jika semua sudah selesai simpan template
Baca juga : Inilah Kumpulan Tag Kondisional Blogger Terbaru

Cara Memanggil CSS Kotak Kode
1. Buat Postingan Baru atau pilih Postingan yang akan mememakai kotak kode script
2. Pilih halaman HTML (Bukan Compose),
3. Salin kode di bawah ini ke bagian postingan yang ingin anda pasang Kotak Kode Script
<pre data-codetype="CSS" title="CSS">
<code class="language-markup"> Letakan Kode scriptnya disini</code>
</pre>

Catatan :
- Ganti CSSku dan CSS jika anda mau mengganti, ganti dengan kata berikut ini CSSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery,
- Ganti tulisan kode anda di sini...... dengan kode yang akan anda masukani ke dalam kotak kode atau kotak script kode yang sudah di buat tadi. namun, sebelum saat anda memasukan kode anda usahakan untuk memparse kode terlebih dahulu.
- Untuk memprase anda bisa bisa lakukan di blogcrowds

4. Selesai.

Cukup mudah bukan tutorial memasang Kotak Kode script di Dalam Postingan, semoga bisa bermanfaat dan membantu anda yang mencari tutorial seperti ini.

0 Response to "Memasang Kotak Kode CSS Syntax Highlighter Dalam Postingan"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel