🔔 Aktifkan notifikasi. disini Google News

Cara Menampilkan Kode HTML di postingan Blogger Template fletro Pro

Tutorial mengaktifkan Fitur Syntax Hightlighter, supaya bisa menampilkan kode HTML, Javascript dan CSS di Postingan blogger

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
Cara Menampilkan Kode HTML di postingan Blogger Template fletro Pro

Harga : *Belum termasuk Ongkos kirim
Pesan via whatsapp Pesan via Email
Baca juga :

Mau donasi lewat mana?

BRI - Warsito (38940-10507-29535)

Mandiri - Warsito (1370-0182-86605)

BSI - Warsito (7153-4266-72)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.

About the Author

Paling Kepo dengan Informasi seputar Technology dan terobosan Bisnis. I'm a Freelance and Content Creator.

Post a Comment

Silahkan berkomentar dengan tutur bahasa yang baik!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.