Cara Menulis Kode HTML Pada Postingan Blog

December 9, 2009 by
in : Lainnya / 50 Comments / 4,799 views

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:
    4045059035 4a273fc197 Cara Menulis Kode HTML Pada Postingan Blog

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

    Cara Menulis Kode HTML Kode HTML Tag

    Komentar Masuk

    Skip to Comment Form
    1. Hari Mulya says:
      December 9, 2009 at 5:34 am

      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.

      Reply
    2. Badruz says:
      December 9, 2009 at 8:13 am

      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.

      Reply
    3. Badruz says:
      December 9, 2009 at 8:15 am

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

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

      Reply
    4. marsudiyanto says:
      December 9, 2009 at 8:27 am

      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?

      Reply
    5. Wempi says:
      December 9, 2009 at 8:29 am

      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..

      Reply
    6. tukangpoto says:
      December 9, 2009 at 9:19 am

      Waduh untuk urusan kode-kode begini mah saya nyerah deh…gaptek.
      .-= tukangpoto´s selesai [nulis] ..Tips memotret aksi dan olah raga =-.

      Kalo urusan moto baru jago ya Mas… :lol:

      Reply
    7. pakde Cholik says:
      December 9, 2009 at 11:35 am

      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…

      Reply
    8. fanz says:
      December 9, 2009 at 2:21 pm

      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… :lol:

      Reply
    9. iskandaria says:
      December 9, 2009 at 7:35 pm

      Kalo dalam mode html Bukan mode compose), kayaknya sih nggak perlu pake simbol-simbol itu mbak. Tapi gak tau juga kalo di WP. Kalo saya upload gambar biasanya udah otomatis sih kodenya. Nggak pake ngedit lagi. Sementara ini dulu ya mbak :???:
      .-= iskandaria´s selesai [nulis] ..Download MP3 Soundtrack Take Me Out Indonesia =-.

      Jadi bingung saya…

      Reply
    10. rudy azhar says:
      December 9, 2009 at 8:56 pm

      Kalau saya tinggal di extract menggunakan encode html siap dan praktis…

      Ya ya, nanti saya belajar yang itu juga… Belom pernah coba.

      Reply
    11. nakjaDimande says:
      December 10, 2009 at 6:25 am

      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? :lol: Saya tunggu ya, tutorialnya ala Bundo… ;-)

      Reply
    12. imadewira says:
      December 10, 2009 at 9:02 am

      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… ;-)

      Reply
    13. iskandaria says:
      December 10, 2009 at 1:25 pm

      Wah, ternyata saya salah paham mbak (jadi malu). Maksudnya biar kode html-nya tampil pada postingan kan? :D
      .-= iskandaria´s selesai [nulis] ..Belajar dari Blog Yep dalam Mengelola Blog Gado-Gado =-.

      Iya, kalo mo ngajarin kode HTML kan kodenya harus kelihatan di postingan kan? Biar nggak langsung dieksekusi jadi gambar di dalam postingannya…

      Reply
    14. nunik says:
      December 11, 2009 at 11:05 am

      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… :cry: :cry:

      Reply
    15. casrudi says:
      December 11, 2009 at 2:04 pm

      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…

      Reply
    16. casrudi says:
      December 11, 2009 at 2:13 pm

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

      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? :?:

      Reply
    17. yoga says:
      December 12, 2009 at 5:29 pm

      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… :cry:

      Reply
    18. BlogCamp says:
      December 14, 2009 at 6:36 am

      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…

      Reply
    19. ariesre says:
      December 14, 2009 at 4:22 pm

      wah thanks nih infonya,,berguna bgt

      salam…

      Terimakasih…

      Reply
    20. bundadontworry says:
      December 15, 2009 at 6:40 pm

      no comment, malah kliyeng kliyeng……….
      salam.
      .-= bundadontworry´s selesai [nulis] ..Kiat hadapi Diskon Akhir Tahun. =-.

      Kalo pusing, di skip aja Bunda…

      Reply
    21. dani says:
      December 16, 2009 at 5:15 am

      @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 =-.

      Reply
    22. nunik says:
      December 16, 2009 at 9:39 am

      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.

      Reply
    23. dani says:
      December 16, 2009 at 8:23 pm

      @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?
       Reply
    24.  Abu Ghalib says:
       December 17, 2009 at 8:58 am
      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? =-.
       Reply
    25.  nakjaDimande says:
       December 18, 2009 at 10:30 am
      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…
       Reply
    26.  lukas gentara says:
       December 19, 2009 at 4:46 pm
      kayaknya pake text area lebih simpel mbak..! :razz:
       .-= lukas gentara´s selesai [nulis] ..Cewek Cantik vs Cewek Seksi =-.
      Iya, Pak guru Mars juga ngajarin begitu, tapi kata Mas Dani Iswara, Pak Dokter, memang sesuai fungsinya, bukan pake text area…
       Reply
    27.  lukas gentara says:
       December 19, 2009 at 4:48 pm
      itu loh, yang suka di pajang di side bar buat tuker link atau tuker banner.. :grin:
      Iya, udah bisa mbayangin…
       Reply
    28.  monda says:
       January 12, 2010 at 7:55 pm
      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…
       Reply
    29.  Aliche says:
       January 31, 2010 at 4:41 pm
      Keren artikelnya,
       Tukar link yuk
       ~~~
        :D 
       Reply
    30.  BloggingBisnis says:
       March 15, 2010 at 2:28 pm
      Menambah wawasanku. Thanks ya.
       .-= BloggingBisnis selesai posting Ganti Template, Bagaimana Caranya Ya? =-.
       Reply
    31.  Nyach says:
       April 8, 2010 at 9:57 pm
      tentang html kok sulit ya mbak,
       terimakasih menambah ilmu
       salam kenal dulu ya smoga terbalas
       Reply
    32. BELAJAR « WAITABULA SUMBA BARAT DAYA says:
       April 20, 2010 at 9:07 pm
      [...] BELAJAR  1. Cara Mengupload Website Ke Control Panel Hosti 2.Cara Mengupload Website anda pada 000webhost (V) 3.Kode HTML Dasar yang Perlu Diketahui 4.Kode-kode HTML 5.Cara Menulis Kode HTML Pada Postingan Blog [...]
       Reply
    33.  satria says:
       April 24, 2010 at 10:49 am
      Tanks ya infonya… saya baru aja bikin artikel yang ada kode htmlnya. makanya saya bisa nyampe di blog ini.
       Dan ternyata berhasil, tapi saya tidak merubah ketiga kode itu, hanya salah satu saja sudah bisa kok..
       .-= satria selesai posting PERSIAPAN BUDIDAYA LOBSTER AIR TAWAR (LAT) ALA SATRIA =-.
       Reply
    34.  helman says:
       May 5, 2010 at 5:55 am
      yaaaaaaa g bisa bisa, piye iki. katanya tanda spasi juga diubah kok…..
       Reply
    35.  blog bisnis program says:
       May 21, 2010 at 9:41 pm
      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 =-.
       Reply
    36.  Sahabat Blogger says:
       June 2, 2010 at 1:29 pm
      tks infonya..baru aja saya kesulitan menulis html dalam postingan..hehe
       .-= Sahabat Blogger selesai posting Kondisi Darurat: Nomer telepon sangatlah penting =-.
       Reply
    37.  Naufal Agam says:
       July 5, 2010 at 3:31 pm
      Wah, makasih tipsnya mbak
       Reply
    38.  mizan says:
       July 11, 2010 at 8:45 pm
      tak coba langsung nich… eh kalau gak jadi uang kembali to???? he,,,,
       mizan selesai posting Detik-detik Menanti Ramadhan
       Reply
    39.  sawali tuhusetya says:
       July 18, 2010 at 4:04 am
      wah, ternyata begitu triknya, ya, mbak is. tadi iseng2 nyoba sendiri ndak bisa2, hiks, untung ada tulisan mbak is. matur nuwun, mbak.
       sawali tuhusetya selesai posting Puisi dan Pendidikan Karakter- Sebuah Pengantar
       Reply
    40.  amrikarisma says:
       September 26, 2010 at 7:25 am
      mampir juga ke blog saya :D
       kok comluv blog ane ga keluar ya ??
       Reply
    41.  Salsabila says:
       October 2, 2010 at 1:03 am
      Thank,atas ilmunya tapi klo bisa tambah lg gan…
       Reply
    42.  http://tabib-ampuh.blogspot.com says:
       November 18, 2010 at 5:04 pm
      thank for infonya . sangat berguna.
       http://tabib-ampuh.blogspot.com selesai posting KURSUS PENGOBATAN- SULAP &amp BELADIRI
       Reply
    43.  subangkit says:
       November 22, 2010 at 11:44 pm
      cara untuk membuat table di blog itu gimana y?
       coz kemaren aku buatnya pakek html kok gag di esekusi??
      bingung aku…solusinya gimana kak??
       subangkit selesai posting Tips agar tidak kena tilang
       Reply
    44.  eko says:
       November 30, 2010 at 11:23 am
      terima kasih buat infonya mba. :)
       eko selesai posting Menampilkan kode HTML pada postingan blog
       Reply
    45.  nC says:
       June 15, 2011 at 5:19 am
      wua, udh sya cba ngedit manual, sma pke bntuan html encoder. kq gk jadi2 :(
       Reply
    46.  obhert says:
       July 7, 2011 at 12:55 pm
      baca dari postingannya sih bisa paham yang ane magsud, setelahbaca ribuan komengnya malah jadi pusing……………..!!! hedewh…..!!!
       Reply
    47.  Kedy says:
       July 7, 2011 at 1:02 pm
      Saya belum bisa membuat gambar dengan memasukan kode html. .
       Mksih informasi nya ya agan !
       Reply
    48.  Kedy says:
       July 8, 2011 at 5:10 pm
      Mas ini kode html nya itu emang pake spasi atau nggak sich
       Reply
    49.  Agus says:
       March 1, 2012 at 12:27 pm
      Setuju Gan….
       Reply
    50.  uul says:
       April 9, 2012 at 1:55 pm
      sippppppppppppp,,,,,,,,,,,
      by 1beritaunik.blogspot.com
       Reply
    Silakan berkomentar..
     
      
      
      
        
    CommentLuv badge