Cara Membuat Script Box di Postingan Blogger

Pada tutorial kali ini tutor keren bakal ngejelasin ke temen-temen bagaimana sih cara menambah script box untuk kode HTML, CSS, dan JavaScript pada postingan blogger ?

Sebelum lanjut apa sih Script Box itu ? Script box merupakan element html supaya bisa menyisipkan kode html atau kode lainnya di dalam postingan blogger.

Nah tentunya script box ini dibangun dengan struktur Html yaitu tag <pre> dan tag <code>, untuk melihat lebih lengkapnya tentang tag <pre> dan <code> temen-temen bisa lihat lebih lengkapnya disini.

Tapi kayanya kalau tag <pre> aja kurang begitu bagus dilihatnya. Maka dari itu kita butuh sedikit kode CSS untuk mempercantik tampilannya.

Langsung aja deh, gak perlu banyak basa basi kita eksekusi langsung tutorialnya.

Cara Membuat Script Box di Postingan Blogger


  • Login ke Dashboard Blogger
  • Masuk ke Tema > Edit
  • Masukan kode CSS berikut ini diatas tag ]]></b:skin> atau diatas tag </style>

/* CSS BOX KODE CSS */
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:#ffffff;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:#ffffff;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',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;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:#22A7F0;}
/* CSS BOX KODE CSS END */
Yang saya kasih warna hijau, itu adalah jenis bahasa pemograman yang temen-temen pake karena setiap bahasa markup itu berbeda beda ya kan ?? jadi supaya temen-temen gak bingung dan bisa membedakan mana bahasa HTML, CSS, dan JS.

Lanjut.. Setelah dimasukan kode CSS berikut temen-temen bisa langsung coba dengan menambahkan postingan baru dan mengetikan kode berikut :

<pre data-codetype='HTMLku' Title='Kode HTML'><code='language-markup'>

KODE HTML,CSS,JS TEMEN-TEMEN BISA DIKETIK DISINI

</code></pre>
Catatan : Kalau mau masukin script HTML, CSS, JS temen-temen harus PARSE HTML dulu, dikarenakan karakter berikut < > " " berbeda dalam bahasa XML di blogger. Apabila belum paham tentang PARSE HTML temen-temen bisa kunjungi link berikut : Pengertian Parse HTML dan Cara Menggunakannya.
Mungkin sekian tutorial Cara Membuat Script Box di Postingan Blogger semoga dapat bermanfaat bagi temen-temen apabila masih bingung silakan jangan sungkan untuk bertanya dikolom komentar

Wassalamu'alaikum wr.wb

Tidak ada komentar:

Posting Komentar

Designed with by Way2themes | Distributed by Blogspot Themes