Cara Add Kode HTML dan CSS dalam Konten Postingan Blogger

Menyertakan kode CSS atau HTML pada konten postingan yang berupa tutorial harus menggunakan kode khusus agar nantinya kode tersebut tidak terbaca sebagai bagian dari kode template sehingga dapat ditampilkan secara terpisah menyerupai teks biasa. Jika anda dalam menyelipkan kode CSS atau HTML tanpa menggunakan kode khusus dan langsung saja menempelkan kode tersebut baik dalam mode Compose maupun HTML ketika konten postingan dipublikasikan sudah dapat dipastikan kode tersebut tidak akan tampil sesuai dengan keinginan anda bahkan akan membuat konten postingan anda terlihat berantakan.

Berikut ini tutorial cara menyelipkan kode CSS atau HTML pada konten postingan, sebagai contoh saya disini akan membagikan source kode pemasangan iklan affiliate pada blog dengan template AMP pada salah satu postingan tutorial memasang iklan affiliate. Sehingga nantinya pengunjung yang ingin menerapkan dapat dengan mudah menyalit source kode pemasangan iklan tersebut dan saya tidak perlu membuat link download source kode iklan tersebut dalam file notepad.

Buat postingan sebagaimana biasanya, kemudian pada area paragraf yang ingin anda tambahkan source kode CSS atau HTML letakkan kode berikut ini:

 
  <pre><code> 
  CODE DISINI
  </pre>
  </code>

Kemudian siapkan source kode yang akan anda bagikan, jika anda menulis konten postingan dalam mode HTML maka langkah awal adalah memparse kode tersebut agar dapat secara langsung ditempelkan pada area penempatan kode yang akan dibagikan. Anda bisa menggunakan situs-situs online parse code HTML dan CSS seperti contohnya fitur parse code yang ada pada website penaindigo.com.

Tempelkan kode pada area kolom parse, kemudian klick Parse Script, dan hasil parse code seperti screenshot berikut ini:

Salin kode tersebut, kemudian letakkan pada area penempatan kode "CODE DISINI" seperti contohnya pada screenshot berikut ini:

Langkah terakhir publikasikan konten postingan tutorial yang telah anda buat, dan lihat hasilnya, source kode yang anda bagikan akan muncul sebagai teks biasa dan terpisah dengan teks paragraf lainnya.

Jika anda menulis tutorial dalam mode compose maka sebelum menempatkan kode pemasangan HTML atau CSS anda harus beralih terlebih dahulu ke mode penulisan HTML kemudian pastekan source pemasangan kode, setelah itu kembali lagi ke mode penulisan Compose. Salin kode HTML atau CSS yang akan anda bagikan dan tempelkan pada area penempatan kode "CODE DISINI". Dalam hal ini source kode yang akan anda bagikan tidak perlu diparse karena anda menulis dalam mode Compose langsung saja tempelkan kode pada area penempatan kode yang akan dibagikan.