August 17, 2019

Cara mudah menyisipkan sumber kode HTML ke dalam artikel blog

code source
Bisa saja langsung letakan kode sumber HTML di dalam postingan untuk tutorial, kebetulan editblog tidak bisa dipisahkan dari tutorial yang mengandung code source, template yang sedang saya pakai ini adalah SOHO terkadang untaian kode sangat panjang dan mersak fitur tampilan responsive pada saat di akses melalui hape (atau pada layar mobile)

Dan hal tesebut berakibat editblog menerima notifikasi dari webmaster, halaman mobile melebar dan menjadikannya tidak responsive pada saat dibaca oleh pengunjung. Barabenya saya telah banyak sekali membuat artikel tutorial yang harus menyertakan code source, sementara memperbaiki yang telah terlanjur dibuat itu sulit, harus mengembalikan konten ke dalam bentuk editor pada compose jelas tidak selalu bisa, jadi harus melalui opsi HTML.

Nah supaya hal ini tidak terulang pada anda dan juga saya ada baiknya setiap kali memasukan code source atau sumber kode HTML alangkah baiknya membuatkannya frame terlebih dahulu.

Cara pertama:
Setelah menulis pembukaan artikel dan bermaksud langsung ke bagian inti tutorial koding misalnya, dari opsi compose pindah ke opsi HTML lalu kopi paste saja format dibawah ini, ke dalam postingan anda hapus isinya (tulisannya) dan  lalu kembali lagi ke opsi compose
hapus tulisan ini dan ganti dengan code source anda sendiri
Lalu hapus tulisan yang ada didalamnya dan ganti dengan code source anda sendiri.
Lanjutkan menulis dan bilamana akan memasukan kode HTML lagi ulangi saja cara diatas.

Cara kedua.
Setelah menulis pembukaan artikel dan bermaksud langsung ke bagian inti tutorial koding misalnya, dari opsi compose silahkan pindah ke opsi HTML sejenak:
lalu buat format berikut untuk diletakan sebelum dan sesudah kode HTML yang akan kita tempatkan:
<div style="background-color: #f9f8de; border: 1px #dedede double; height: 60px; overflow: auto; padding: 10px; text-align: left; width: auto;">

code source atau kode HTML anda sisini

 </div>
Bentuknya akan terlihat sebagai berikut:

<div style="background-color: #f9f8de; border: 1px #dedede double; height: 60px; overflow: auto; padding: 10px; text-align: left; width: auto;">
Tempatkan Script HTML Disini
 </div>

Kedua cara diatas itu sekarang telah diterapkan pada artikel artikel terakhir editblogtema.

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist