Dear Sobat Blogger, dalam artikel kali ini akan kita bahas cara menampilkan kode HTML di Postingan Blogger. Disini template yang saya gunakan yaitu Fletro Pro, nah pada template fletro pro ini sebenarnya sudah ada Fitur Syntax Hightlighter, namun kita belum tahu cara mengaktifkanya. Untuk mengaktifkan Syntax Hightlighter temen-temen silahkan untuk mengetik artikel seperti biasa namun gunakan mode HTML. Kemudian Tulislah dengan Kode Seperti ini :
<div class="pre hl notranslate" data-text=".html">
<div id="code2">
<pre>Taruh Kode HTML di sini...</pre>Ganti tulisan "Taruh Kode HTML di sini..." dengan kode HTML atau Javascript atau CSS kamu, namun untuk kode HTML dan Javascript wajib di Parse terlebih dahulu. Cara Parse kode HTML dan Jawscript Silahkan pake gunakan Tools Berikut :
Tool parse HTML dan Javascript
Pengertian PARSE yaitu sebuah alat yang digunakan untuk mengubah kode-kode tertentu agar dapat berfungsi
semestinya. Parse jika diterjemahkan dalam Bahasa Indonesia berarti menguraikan. Jelasnya seperti ini Jika kita menempelkan KODE HTML atau JavaScript maka kode tersebut aktif dan akan menrubah tampilan halaman website kita, biasanya menjadi berantakan. Untuk itulah diperlukan Tools Parse.
Bagaiaman Buat Blog yang belum mendukung syntax highlighter ? temen-temen bisa memasangnya seperti ini :
Silahkan buka Edit Tema kemudian Copy dan Paste kode berikut tepat sebelum </style> .
.post-body pre {
background-color: #292E34; /* warna background */
border-left: 5px solid #008c5f; /* variasi border kiri */
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; 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 code {
color: #BFBF90; /* warna huruf */
font-size: 12px; /* ukuran huruf */
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}Langkah terakhir silahkan untuk tekan Simpan, Nah untuk cara menuliskan Kode di postingan temen-temen tinggal menggunakan atribut yang tadi diatas. atau tinggal mulai dengan kode :
<pre><code>
Masukkan semua kode CSS, HTML atau Javascript disini
</pre></code>Oke Sobat itu saja yang bisa kita bahas saat ini, Tutorial Cara Memasang Syntax Highlighter Keren di Blogger. Semoga bermanfaat dan jangan lupa untuk share ke media sosial kamu.
Cara Menampilkan Kode HTML di postingan Blogger Template fletro Pro
Harga : *Belum termasuk Ongkos kirim