Cara Memasang Kotak Script Terbaru Dalam Postingan

Cara Memasang Kotak Kode Script Keren Dalam Postingan - Saat membuat artikel tentang tutorial blog apalagi tentang cara memodifikasi template. Pastinya anda memerlukan sebuah kotak kode yang digunakan untuk menyimpan kode script tutorial untuk artikel anda.

Kotak kode script tersebut membuat isi artikel terlihat rapi atau terstruktur dengan baik. Selain itu 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.

Kode di bawah ini tidak terlalu ribet pemasangannya, namun jika anda ingin memasang dan menggunakannya, 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

Cara Memasang Kotak Kode di Postingan

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 "Letakan Kode scriptnya disini" dengan kode yang akan anda tampilkan pada postingan. 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 Artikel, semoga bisa bermanfaat dan membantu anda yang mencari tutorial seperti ini.

Belum ada Komentar untuk "Cara Memasang Kotak Script Terbaru Dalam Postingan"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel