Sudah tahu cara menulis kode HTML di postingan blog dengan tampilan yang menarik? Kalau belum, sekarang saatnya untuk mempelajarinya! HTML (HyperText Markup Language) adalah bahasa standar pembuatan halaman web. Dengan HTML, Anda dapat membuat struktur teks, gambar, link, dan elemen lain yang akan ditampilkan di halaman web.
Apa Itu Kode HTML?
Kode HTML adalah singkatan dari HyperText Markup Language, yang berfungsi untuk membuat struktur teks dan gambar pada sebuah halaman web. Kode HTML sendiri terdiri atas beberapa tag (label), di mana setiap tag menyatakan sebuah fungsi tertentu.
Pada umumnya, kode HTML digunakan untuk menampilkan teks dengan format tertentu, seperti teks yang ditampilkan dengan bentuk huruf tebal atau miring. Selain itu, kode HTML juga bisa digunakan untuk menampilkan gambar atau video pada sebuah halaman web.
Cara Menulis Kode HTML di Postingan Blog
Jika anda ingin menulis konten syntax kode di postingan blog anda, maka anda perlu menerapkan beberapa syntax kedalam tema blog anda agar tampilan dari syntax tidak terbaca aktif namun tampil rapi dalam sebuah tabel sehingga dapat mudah di baca. Hal ini wajib bagi kamu terapkan ke dalam tema blog kamu yang sering menulis konten artikel niche HTML maupun bahasa pemrograman lainnya seperti pada tampilan di bawah ini sehingga terlihat rapi dan mudah di baca audiens.
 |
| Sumber: rahfakreatif.com |
Untuk memasukkan kode HTML ke dalam postingan blog, Anda bisa melakukan beberapa langkah berikut ini:
- Pertama-tama kita menuju ke pengaturan “jendela blogger”, lalu tautkan “tabel” dan berikutnya klik “edit HTML”.
- Pilih pasangkan code berikut di sebelum </style> pada HTML. Untuk bisa menemukan kode </style> anda bisa menggunakan fungsi find (ctrl+F).
/*Syntax Highlighter Membuat Blogger Lebih Menarik*/
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:200px}
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}- Kemudian ke bagian “</body>”. Gunakan ctrl+f untuk lebih cepat menemukan tag “</body>”. Lalu masukkan code berikut sebelum tag </body>
<script type=’text/javascript’>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement(“script”);e.src=”https://cdn.rawgit.com/bungfrangki/highlight/master/highlight2.js”,document.body.appendChild(e)}window.addEventListener?window.addEventListener(“load”,downloadJSAtOnload,!1):window.attachEvent?window.attachEvent(“onload”,downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Kami telah menampilkan style dan scriptnya. Lalu bagaimana cara kita membuat tata letak seperti yang kita inginkan?
Selanjutnya, masukkan contoh kode yang ingin Anda buat. Caranya ikuti lingkungan kode berikut ini.
<pre><code>
Silahkan masukkan code HTML, JS, JQuery, CSS disini
</code></pre>
Silahkan masukkan code HTML, JS, JQuery, CSS disini
</code></pre>
Nah mudahkan Cara Menulis Kode HTML di Postingan Blog Dengan Tampilan Yang Menarik. Semoga dapat membantu anda ya, terimakasih.
