Cara Membuat Kotak Kode HTML di Postingan Blog

Kotak untuk menampilkan kode HTML memang sangat berguna untuk dapat membedakan kode tersebut dengan tulisan lain postingan blog tersebut. sebenarnya tidak hanya html, kota tersebut juga dapat menampilkan script ataupun bahasa pemrograman lainnya misalnya CSS, JavaScript dll.

Kotak kode html ini pun sebenarnya memiliki sebutan tersendiri, Syntax Highlighter.

Untuk membuat Syntax Highlighter ini pun tidaklah sulit, langung saja simak langkah-langkahnya dibawah ini

Cara Membuat Kotak Kode HTML di Postingan Blog

Secara umum ada 2 cara untuk membuat kotak kode html atau Syntax Highlighter pada blog

Pertama adalah dengan menambahkan kode CSS pada blog dan saat ingin menggunakan Syntax Highlighter kamu hanya perlu menggunakan sedikit kode.

Cara kedua adalah dengan memasukan kode html utuh kedalam postingan.

Kedua cara tersebut tentu memiliki kelebihan dan kekurangannya masing-masing, langsung saja simak caranya satu-persatu.

Kotak Kode Menggunakan CSS

Keuntungan membuat kotak html menggunakan css adalah kita tidak perlu repot-repot lagi menggunakan kode html utuh dan hanya perlu menggunakan kode singkat yang mudah diingat.

Cara ini cocok jika kamu akan sering menggunakan kotak kode tadi untuk postingan-postingan kamu berikutnya.

Kamu dapat melihat demo hasil jadinya disini

Caranya:
1. Bukalah Dashboard Blogger kamu
2. Klik Edit Html pada Menu tema
3. Paste kan lah kode css dibawah ini tepat diatas kode ]]></b:skin> atau </style>

*gunakanlah ctrl+f untuk memudahkan mencari kode tersebut.

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

4. Selanjutnya tambahkanlah kode dibawah ini diatas kode </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

5. Simpan Tema.

Sampai disini kamu sudah berhasil memasang css untuk membuat kode box pada blog

Adapun jika kamu ingin menggunakannya dalam postingan caranya adalah sebagai berikut

1. Buka Postingan Kamu
2. Masuk kebagian HTML bukan Compose
3. Gunakan kode <pre><code>Masukkan Kode Script Disini</code></pre>

Contoh

<pre><code>&lt;!-- footer nav menu --&gt;
&lt;div id='footer-navmenu'&gt;
&lt;nav id='footer-navmenu-container'&gt;
&lt;!-- menu navigasi footer start ficri --&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='/p/about.html' title='About'&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/contact.html' title='Contact'&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/disclaimer.html' title='Disclaimer'&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/privacy-policy.html' title='Privacy Policy'&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- menu navigasi footer end --&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;!-- footer nav menu end --&gt;</code></pre>

jadi intinya jika ingin membuat kotak kode html kamu hanya perlu memasukan kode tersebut diantara <pre><code> Dengan </code></pre>

Kotak Kode Menggunakan Html Utuh

Maksud dari menggunakan html utuh disini adalah kamu tidak perlu terlebih dahulu memasang kode css pada edit html blog kamu.

kamu hanya perlu pastekan kode htmlnya pada bagian HTML bukan Compose saat menulis artikel blog.

Adapun kotak kode yang akan saya bagikan dibawah ini adalah kotak kode yang saya buat pribadi dan digunakan di blog Carimul.com ini

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">

Pastekan Code HTML Di Sini </div>

Setelah kamu mempastekan kode diatas pada bagian Html postingan blog maka pada bagian Compose akan terlihat seperti ini

Pastekan Code Html Di Sini

Selanjutnya kamu tinggal pastekan saja kode html pada kotak yang sudah tersedia tersebut

Note:
untuk cara menggunakan HTML utuh, pastekan "kode kotak" di bagian HTML, sedangkan pastekanlah kode html yang ingin dimasukan kedalam kotak pada bagian Compose

Cara yang satu ini lebih sederhana dan mudah digunakan selain itu cara ini juga lebih cocok jika kamu tidak terlalu sering menggunakan kotak kode ini.


Penutup
Itulah tadi artikel tentang bagaimana Cara Membuat Kotak Kode HTML di Postingan Blog, dari kedua cara yang tersedia silahkan pilih saja sesuai keperluan kamu. Akhir kata semoga artikel ini dapat berguna dan bermanfaat untuk kita semua.

Share this post