Cara Mudah Membuat Kotak Script di Postingan Blog

Seorang blogger pasti ingin membuat tampilan halaman blognya menarik. Setiap membuat postingan blog terkadang kita perlu menyisipkan kode script, entah itu HTML, CSS, Javascript, maupun Jquery. Dan pada artikel kali ini Kang Tutorial akan membahas tentang bagaimana cara membuat kotak script pada artikel blog.

Cara Mudah Membuat Kotak Script di Postingan Blog

Kotak script atau kadang disebut script box ini berfungsi untuk mempermudah dalam mengidentifikasi atau membaca letak dari penulisan script tersebut. Selain itu kotak script juga bertujuan agar postingan terlihat menarik, rapit, dan tidak memakan banyak tempat tentunya.
Kotak script biasanya dibentuk oleh kode pembuka <pre> dan ditutup oleh kode </pre>. Meskipun sebenarnya bawaan blogger sudah ada terkait pembuatan kotak script ini dengan kode <pre>, namun terkadang hasilnya biasa saja dan terlihat kurang menarik.

Nah, lalu bagaimana cara untuk membuat kotak script di postingan blog ? Simak langkah-langkah berikut ini.

Cara Membuat Kotak Script di Postingan Blog dengan Javascript

Pada pembuatan kotak script versi yang pertama ini selain menambahkan kode CSS, juga menambahkan kode Javascript.

1. Pertama login ke Blogger.

2. Pilih Tema > Edit HTML.

3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>.

/* Kotak Script */

pre{font-family:Monaco,"Andale Mono","Courier New",Courier,monospace;background-color:#000;background-image:-webkit-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-moz-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-ms-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-o-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-size:100% 50px;line-height:25px;overflow:auto;word-wrap:normal;-webkit-background-size:100% 50px;-moz-background-size:100% 50px;color:#fff}pre:before{content:'';display:block;background:brown;margin-left:-7px;color:#fff;padding: 5px 0px 5px 7px;font-weight:400;font-size:14px}pre code,pre .line-number{display:block}pre .line-number a{color:#27ae60;opacity:0.6}pre .line-number span{display:block;float:left;clear:both;width:20px;text-align:center;margin-left:-7px;margin-right:7px}pre .line-number span:nth-child(odd){background-color:rgba(0,0,0,0.11)}pre .line-number span:nth-child(even){background-color:rgba(255,255,255,0.05)}pre .cl{display:block;clear:both}pre[data-codetype]{padding:0 0 0 0}pre[data-codetype]:before{content:attr(data-codetype);display:block;top:-5px;right:0;left:0;box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;margin-left:0;color:white}pre[data-codetype="HTML"]{color:#fff}pre[data-codetype="CSS"]{color:#fff}pre[data-codetype="JavaScript"]{color:#fff}pre[data-codetype="JQuery"]{color:#fff}pre[data-codetype="HTML5"]{color:#fff}pre[data-codetype="CSS3"]{color:#fff}
pre[data-codetype="HTML"]:before{font-family:FontAwesome;background-color:#123456;color:#fff;content:'HTML \f13b'}
pre[data-codetype="CSS"]:before{font-family:FontAwesome;background-color:#288433;color:#fff;content:'CSS \f13c'}
pre[data-codetype="HTML5"]:before{font-family:FontAwesome;background-color:darkred;color:#fff;content:'BENTUK PENULISAN HTML \f13b'}
pre[data-codetype="CSS3"]:before{font-family:FontAwesome;background-color:darkcyan;color:#fff;content:'BENTUK PENULISAN CSS \f13c'}
pre[data-codetype="JavaScript"]:before{font-family:FontAwesome;background-color:purple;color:#fff;content:'JavaScript'}
pre[data-codetype="JQuery"]:before{font-family:FontAwesome;background-color:#0972cd;color:#fff;content:'JQuery'}
pre[data-codetype="HTML"] span.line-number{border-right:2px solid #123456}
pre[data-codetype="CSS"] span.line-number{border-right:2px solid #288433}
pre[data-codetype="HTML5"] span.line-number{border-right:2px solid darkred}
pre[data-codetype="CSS3"] span.line-number{border-right:2px solid darkcyan}
pre[data-codetype="JavaScript"] span.line-number{border-right:2px solid purple}
pre[data-codetype="JQuery"] span.line-number{border-right:2px solid #0972cd}
pre code,pre .line-number{display:block}pre .line-number{color:#fff;float:left;border-right:2px solid brown;text-align:right;margin-right:10px}pre .line-number a{color:#27ae60;opacity:0.6}pre .line-number span{padding:0 .8em 0 1em;display:block;float:left;clear:both;width:20px;text-align:center;margin-left:-7px;margin-right:7px}

Cara Mudah Membuat Kotak Script di Postingan Blog

4. Setelah itu cari kode </body> dan letakkan kode Javascript dibawah ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
!function(){for(var n=document.getElementsByTagName("pre"),e=n.length,a=0;e>a;a++){n[a].innerHTML='<span class="line-number"></span>'+n[a].innerHTML+'<span class="cl"></span>';for(var s=n[a].innerHTML.split(/\n/).length,r=0;s>r;r++){var l=n[a].getElementsByTagName("span")[0];l.innerHTML+="<span>"+(r+1)+"</span>"}}}();
//]]>
</script>

Cara Mudah Membuat Kotak Script di Postingan Blog

5. Terakhir pilih Simpan.

Cara Mudah Membuat Kotak Script di Postingan Blog
Contoh Kotak Script


Cara Pemanggilan Kotak Script

1. Saat membuat artikel dan akan menyisipkan kode script, ubah dari mode Compose ke HTML dengan penulisan seperti contoh dibawah ini.

Cara Mudah Membuat Kotak Script di Postingan Blog

2. Pastikan script yang akan disisipkan di artikel harus sudah di parse terlebih dahulu.

3. Setelah di parse, kemudian gunakan kode dibawah ini untuk memanggil kotak script.

<pre data-codetype="HTML">LETAKKAN SCRIPT DISINI</pre>
<pre data-codetype="CSS">LETAKKAN SCRIPT DISINI</pre>
<pre data-codetype="JavaScript">LETAKKAN SCRIPT DISINI</pre>
<pre data-codetype="JQuery">LETAKKAN SCRIPT DISINI</pre>
<pre data-codetype="Bebas Diisi apa">LETAKKAN SCRIPT DISINI</pre>

Untuk Kode Box tanpa judul gunakan script dibawah ini
<pre>LETAKKAN SCRIPT DISINI</pre>

Cara Membuat Kotak Script di Postingan Blog tanpa Javascript

Untuk pembuatan kotak script yang kedua ini hanya menambahkan kode CSS tanpa menggunakan kode Javascript.

1. Pertama login ke Blogger.

2. Pilih Tema > Edit HTML.

3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>.

/* Kotak Script */

.post-body pre{border-left:5px solid var(--color-main); padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal; user-select:text; -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}
.post-body pre.html:before, .post-body pre.css:before, .post-body pre.javascript:before, .post-body pre.jquery:before {display: block; background-color:#bde0b9; padding:5px 35px; font-weight:500; font-size:16px; font-family:Google Sans, -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; background-repeat:no-repeat; background-size:20px 20px; background-position-x:7px; background-position-y:center;}
.post-body pre.html:before {content:'HTML'; background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'></path></svg>");}
.post-body pre.css:before {content:'CSS'; background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'></path></svg>");}
.post-body pre.javascript:before {content:'Javascript'; background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'></path></svg>");}
.post-body pre.jquery:before {content:'jQuery'; background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'></path></svg>");}
.post-body pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none} .post-body pre code{line-height:1.5em;display:block;background:none;border:none;color:#BFBF90;padding:10px 15px; font-size:12px;white-space:pre;overflow:auto;max-height:250px; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} pre mark,code mark,pre code mark{background-color:#95b2f6 !important;color:#292E34 !important;padding:0px;margin:0px} .post-body code {user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} .post-body code.tutor {color:#f44336; letter-spacing:-0.3px} post-body quote{border-left:5px solid var(--color-main); user-select:text; -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:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2; tab-size:2; word-break:normal; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none}

Cara Mudah Membuat Kotak Script di Postingan Blog

4. Lalu Simpan template.

Cara Mudah Membuat Kotak Script di Postingan Blog
Contoh Kotak Script

Cara Pemanggilan Kotak Script

1. Saat membuat artikel dan akan menyisipkan kode script, ubah dari mode Compose ke HTML dengan penulisan seperti contoh dibawah ini.

Cara Mudah Membuat Kotak Script di Postingan Blog

2. Pastikan script yang akan disisipkan di artikel harus sudah di parse terlebih dahulu.

3. Setelah di parse, kemudian gunakan kode dibawah ini untuk memanggil kotak script.

<pre class="javascript"><code> KODE SCRIPT </span></code></pre>
<pre class="html"><code> KODE SCRIPT </span></code></pre>
<pre class="css"><code> KODE SCRIPT </span></code></pre>
<pre class="jquery"><code> KODE SCRIPT </span></code></pre>

Untuk kode box tanpa judul gunakan script dibawah ini
<pre><code> KODE SCRIPT </span></code></pre>

Demikian tutorial tentang Cara Mudah Membuat Kotak Script di Postingan Blog. Apabila ada yang masih bingung dan kurang paham, silahkan bertanya di kolom komentar. Terimakasih dan selamat mencoba.

Artikel Terkait

Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Mudah Membuat Kotak Script di Postingan Blog"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel