Cara Menulis Kode HTML Pada Postingan Blog

Awalnya saya kesulitan membuat postingan sebelumnya Menyimpan Gambar Di Luar Server, karena harus memasukkan kode HTML ke dalam postingan.

Ternyata, ada cara yang cukup mudah untuk dilakukan. Untuk dapat menampilkan kode seperti ini: <img class="alignnone" style="margin: 10px 15px;" title="Backlink Dengan Anchor Text" src="http://farm3.static.flickr.com/2639/4045059035_4a273fc197.jpg" alt="Backlink Dengan Anchor Text" width="100" height="150" /> , kita hanya perlu mengganti tiga kode HTMLnya saja supaya bisa tetap muncul di postingan sebagai kode, bukan sebagai gambar aslinya.

Yang harus dirubah adalah:

  • Kode < diganti menjadi &lt;
  • Kode " diganti menjadi &quot;
  • Kode > diganti menjadi &gt;
  • Maka, kode HTML seperti yang tertulis di atas, tidak serta merta menjadi tampilan gambar seperti ini:
    Backlink Dengan Anchor Text

    Ada beberapa lagi cara lain, tapi saya belom pernah coba. Cara seperti apa yang Anda pakai?

    51 thoughts on “Cara Menulis Kode HTML Pada Postingan Blog

    1. sama mba.. da juga pLugin khusus, tp maLah jd ribet…

      Iya, saya juga belajar cara yang lain, tapi akhirnya memutuskan untuk pake cara yang paling mudah saja.

    2. tadi padi membuka ini beberapa kali nggak bisa Mba:

      Hmm, isnuansa.com isn’t loading right now.
      The computers that run isnuansa.com are having some trouble. Usually this is just a temporary problem, so you might want to try again in a few minutes.
      Want more detail? See which nameservers are failing.

      Begitu.
      sekarang sudah bisa sih.
      .-= Badruz´s selesai [nulis] ..Kehilangan =-.

      Isnuansa.Com memang sering ngadat Mas.

    3. Baru tahu nih Mba cara spt itu. terima kasih, pasti saya praktekkan. 😆 sangat membantu nih Mba.
      .-= Badruz´s selesai [nulis] ..Kehilangan =-.

      Ya, kalo mo nyoba, baca lagi ke sini, hihihi…

    4. Cara apapun, yang penting paham dan nyaman…
      Memang ada softwarenya untuk mengubah kode2 tersebut.

      Cara lain adalah dg text area.
      Dengan cara ini, semua teks yang kita isikan dibaca sebagai teks, sehingga tidak dieksekusi sebagai kode html aktif.
      .-= marsudiyanto´s selesai [nulis] ..HTML, memusingkan sekaligus menggairahkan =-.

      Nanti saya belajar dulu cara buat text area. Pake kode gimana nih Pak?

    5. Yang pasti isnuansa.com gak bisa di open dari rumah. nameserver s not found. mohon untuk di perhatiken… :mrgreen:

      Ok, Bos. Saya tanya kawan saya yang ahli dulu ya..

    6. Kalau di postingan bukan gambar yang keluar dan hanya kode ya nggak mantap donk mbak, apalagi kalau gambar itu sifatnya hanya untuk mempercantik dan bukan merupakan pelengkap artikel.Atau saya salah mengartikan yaaa mbak.

      Maklum banyak diantara kita yang aras-arasen kalau harus kesana-kemari he he he.
      Tip ini tentu saja tetap menarik untuk dipelajari.
      Salam hangat dari Surabaya

      Justru ini caranya kalo kita sedang butuh menampilkan kode HTML sebagai pelengkap artikel, PakDhe, jadi bukan ingin menunjukkan gambarnya… Gitchu…

    7. kalo sayah sih copy paste aja.. soalnya kan bisa lewat upload foto dari url
      .-= fanz´s selesai [nulis] ..Bikin Aplikasi Office Ber-Tab =-.

      Kalo upload foto dari URL memang paling gampang dilakukan… 😆

    8. Hahhh!!! jadi beginilah caranya.. [makaciy nunik pinter 🙂 ]
      .-= nakjaDimande´s selesai [nulis] ..Di Bawah Pohon Jambu =-.

      Iya Bundo, tapi apa Bundo mo ngasih tutorial juga yang membutuhkan penulisan kode HTML di postingan? 😆 Saya tunggu ya, tutorialnya ala Bundo… 😉

    9. lho, masa susah sih, kan tinggal diketik, di wordpress kan ada mode “visual” dan “html”?
      .-= imadewira´s selesai [nulis] ..Tentang Guest Post dan Guest Blogger =-.

      O, gitu ya? Saya terbiasa nulis di mode HTML, jadi setiap kode yang saya ketik, nanti langsung diekseskusi jadi gambar. Nah, pernah juga saya ketik di Mode Visual, tapi kan selalu saya klik juga mode HTMLnya, secara otomatis juga langsung berubah. Pegalaman Bli juga begitu nggak, coba dipraktekin dulu… 😉

    10. Waduh, saya minta maaf secara khusus nih ke Pak Masudiyanto yang memberikan komentar, tapi setelah saya jawab [pake QUICK EDIT, seperti cara saya menjawab komentar yang lain], malah hilang.

      Saya telusuri ke kolom SPAM juga nggak ada, gimana nih?

      Maaf ya Pak Mars… 😥 😥

    11. Ini dia Mbaq yg saya cari… 🙂 Dulu sempat bisa tapi belakangan pada saat membutuhkan lupa lagi caranya…

      Kalau engga salah pake dreamweaver bisa lebih mudah… sayang semenjak kompi saya diinstal ulang DW nya ikut kebawa hilang…
      .-= casrudi´s selesai [nulis] ..Puisi Bukan Puisi =-.

      Kemaren itu saya bisanya juga dari belajar ke blog lain. Sebenernya ada banyak cara, tapi kok saya agak malas belajar yang lainnya. Saya sekilas aja baca, owh, yang ini nih yang mudah, ya, saya langsung praktekin…

    12. Nambah nih Mbaq, tadi juga selesai salat jumat makan saya nambah, masa iya komen aja engga bisa nambah.. 😆

      Pernah nyoba menampilkan kode html di postingan, bisa sih, tapi tanda petiknya (“) jadi miring. Tujuan utama dari menampilkan kode html di postingan kan biar bisa di copas oleh teman yg lain. Hati-hati kode html yg tanda petik dua nya (“) miring -> jika dipastekan dalam draft tulisan maka hasilnya akan error alias tidak akan didapat postingan yg dikehendaki.

      CMIIW mbaq isnu… 🙂
      .-= casrudi´s selesai [nulis] ..Puisi Bukan Puisi =-.

      Hah, jadi tandanya dimiringin pake EM gitu? Trus satu saja yang dimiringin? ❓

    13. iya, saya nyari2 gimana caranya nulis kode kayak gitu. tapi udah ketemu di help wordpress, coz saya pake wordpress biar gratisan. Hua, capek2 saya nyari ternyata disini juga ada. saya terlambat liat artikel ini.
      .-= yoga´s selesai [nulis] ..Untuk Ibu =-.

      Kalo saya nyarinya ke Mbah Google jika nggak tahu… 😥

    14. Kalau di wordpress kan tingga klik HTML untuk menggantikan visual, dah jadi.Kalau ini yang dimaksud lho.Gambar juga demikian, setelah di upload,klik HTML-dah keluar kodenya.
      Salam hangat dari Surabaya.
      .-= BlogCamp´s selesai [nulis] ..PPC Segera Ditutup =-.

      Justru supaya nggak langsung berubah PakDhe, ada caranya…

    15. @marsudiyanto,
      menurut saya, dari sisi semantik/makna, textarea untuk menampilkan ‘input text’.

      @Mbak Nunik,
      untuk menampilkan kode X/HTML di halaman Web, benar sesuai tulisan Mbak Nunik di atas. Sebaiknya memakai entitas numerik (‘numeric entity’) atau entitas nama (‘named entity’). Termasuk tanda kuotasi (2 koma di atas).

      Lebih baik lagi jika ditambahkan elemen <pre> dan <code>. Jika perlu kustomisasi CSS-nya. 🙂

      Tambahan, hasil diskusi dengan Cahya Legawa di blog saya:

      “untuk DOCTYPE XHTML 1.1 atau 1.0 Strict yang disajikan sebagai (‘response header’) application/xhtml+xml — bisa dicek di pengaya fx: web developer, tombol information ⇒ view response headers.
      — simbol dan kode khusus lebih aman jika disajikan dengan entitas numerik. Silakan cek di Opera 9+.

      Misal: simbol hearts ini, ♥, nampak normal di Opera dan fx, tapi yang ini, ♥, keliatan kodenya di Opera.”

      .-= dani´s selesai [nulis] ..Hendaya Kognitif Mengakses Web =-.

    16. Trims Dok, komentarnya meski saya belom pelajari sampe ke sana.

      Saya jawabnya lewat komentar baru aja, soalnya takut bernasip sama dengan komentar Pak Mars yang memberikan contoh cara membuat Text Area.

      Saya awalnya pake code
      tapi tetep aja diubah langsung ke gambar.

    17. @nunik, yang elemen/tag

      dan itu hanya untuk mengatur presentasi/tampilan. 🙂

      Penulisan kode X/HTML yang ingin ditampilkan sebagai kode X/HTML atau PHP tetap mengikuti misalnya Markup specific entities in XHTML (maaf, ini posting di blog saya). Jika tidak, akan dibaca/'dimakan' oleh mesin blog. Kadang dianggap sebagai kode-kode yang membahayakan. 🙂
      .-= dani´s selesai [nulis] ..Comment form in disabled images =-.

      Owh, gitu ya. Kode HTML biasapun bisa dibaca sebagai yang membahayakan?

    18. AHA…!

      ini dia nih yang saya cari selama 100 hari, akhirnya ketemu juga!?

      thanks ya mba
      .-= Abu Ghalib´s selesai [nulis] ..Apa Warna Musik Anda? =-.

    19. ngekek dulu.. nunik tau ngga, kemarin itu ada yang nanya ke bundo di kotak komeng : gimana caranya agar tampilan foto bisa diketengahin?

      nah bundo bikinlah kodenya di awal dan diakhir.. taunya ga muncul apapun di kotak komeng itu **melongo..

      Kalo gambar kan tinggal pilih aja Bund, mo di pinggir kiri, di tengah, atau di kanan…

    20. mbak nunik, salam kenal
      postingnya bermanfaat banget buat saya yang gaptek ini, jadi banyak belajar,
      udah tercatat di tempatku ya mbak

      Kembali kasih, Bunda Monda…

    21. thanks banget barusan saya coba kode htmlnya cari cari eh….dapatnya dari situs mas yang jelas sekali.info yang berguna!
      .-= blog bisnis program selesai posting Tips untuk Meningkatkan Peringkat dan Website Traffic =-.

    22. tks infonya..baru aja saya kesulitan menulis html dalam postingan..hehe
      .-= Sahabat Blogger selesai posting Kondisi Darurat: Nomer telepon sangatlah penting =-.

    23. baca dari postingannya sih bisa paham yang ane magsud, setelahbaca ribuan komengnya malah jadi pusing……………..!!! hedewh…..!!!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    CommentLuv badge