√ Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

Posted by New's

Monday, December 14, 2020

syugulnajeh - Kotak script sangatlah penting untuk blog apabila blog tersebut banyak membahas tentang tips atau tutorial seputar blog atau yang lainnya.

Kotak script ini berguna supaya para pembaca tidak kebingungan dalam membedakan antara konten artikel dan inti dari pembahasnya.

Bisa kamu bayangkan jika sebuah blog tutorial yang menyediakan script, namun dalam penulisan dan penyusunan katanya sangat kacau, antara script dan konten artikel tidak tersusun dengan rapi. Apa jadinya? Pengunjung akan merasa kebingungan dan bahkan cenderung akan menutup artikel tersebut.

Walaupun isi artikel yang kamu berikan bagus dan akan sangat membantu mereka. Mereka justru akan kabur jika susunan artikelnya kacau.

Maka solusi paling tepat dalam masalah ini adalah dengan membuat kotak script khusus. Dalam membuat kotak script sebenarnya sangatlah mudah. Dan ada banyak sekali desain atau tampilan kotak script tersebut.

Dan disini saya akan memberikan contoh kotak script yang paling keren dan responsive pastinya. Berikut adalah penjelasan singkat dalam membuat kotak script HTML di dalam postingan blog.

Cara Membuat Kotak Script HTML, CSS Dan Javascript Di dalam Postingan Artikel Blog

1. Masuk terlebih dahulu ke Dashbor blogger kamu.

2. Masuk ke menu Theme --> Edit HTML.

3. Kemudian copy dan pastekan kode berikut ini tepat diatas ]]></b:skin>.

/* KOTAK SCRIPT By hartomy*/
.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}

4. Klik simpan dan kembali ke Postingan kamu untuk membuat kotaknya.

Untuk cara penggunaan atau memanggil kode tersebut supaya bisa muncul di artikel blog, copy kode berikut ini ke dalam postingan kamu dalam mode HTML!

--> Kode dibawah ini untuk menampilkan HTML

<pre class="html"><code> KODE PASTE DI SINI SCRIPT </code></pre>

--> Kode untuk menampilkan CSS :

<pre class="css"><code> KODE PASTE DI SINI SCRIPT </span></code></pre>

--> Kode untuk menampilkan Javascript :

<pre class="javascript"><code> KODE PASTE DI SINI SCRIPT </span></code></pre>

--> Kode untuk Menampilkam jQuery :

<pre class="jquery"><code> KODE PASTE DI SINI SCRIPT </span></code></pre>

! Apabila dibagian atas terpotong atau kotak scriptnya gak nongol, coba kamu kasih Enter dibagian atas dan bawah kode.

<pre class="html"><code>
.....berikan enter
 masukkan kode HTMLyang telah di PARSE di sini
.....berikan enter
 </code></pre>

Satu hal lagi, kalau kamu tidak ingin menggunakan logo disetiap kotak script, hilangkan saja elemen class-nya.

Dan sesuaikan kotak script dengan kode yang ingin ditampilkan. Jika kode berupa HTML, gunakan script khusus HTML dan begitu pula yang lainnya.

Itulah tutorial singkat cara membuat kotak script keren dan responsive di dalam postingan blog.

New's