Home Ikirangga Tutorial Blogging 4 Langkan Menampilkan Source Code di Postingan Blog

4 Langkan Menampilkan Source Code di Postingan Blog

cara meletakkan coding di postingan blog

Ketika kita menulis sebuah blog kita terkadang ingin share tentang kode html atau kode yang lain di blog. Bagaimana cara kita menunjukkan kode yang akan kita share tersebut? Jika kita menggunakan WordPress mungkin bisa menggunakan plugin yang telah tersedia untuk menampakkan kode yang dishare.

Dalam kasus ini kita dalam kondisi tidak menggunakan plugin walaupun kita sedang menggunakan WordPress. Kondisi ini juga berlaku untuk sahabat ikirangga yang menggunakan blogger sebagai CMS (Content Management System).

Kita menggunakan Github untuk membantu kita melakukan share kode di postingan blog dengan mudah. Github bisa digunakan untuk mengurangi penggunaan plugin di WordPress. Sebenarnya jika menggunakan plugin, kita bisa langsung install pluginnya dan memasang kode html atau kode yang lain menggunakan kode yang berasal dari plugin.

Selain itu ada cara lain dengan menggunakan perintah <pre> ……. </pre> , hal ini saya kutip dari blog advernesia dan cara kedua dengan menggunakan fitur dari situs hilite.me. Apakah kedua cara ini bisa kita terapkan di WordPress atau Blogger? Tentu saja bisa. Menurut advernesia, perintah pre ini merupakan syntax tag HTML yang digunakan untuk mendefinisikan pre-formatted text.

1. Persiapan

  1. Persiapkan terlebih dahulu artikel tempat kita akan share code sehingga nanti kita bisa langsung praktek.
  2. Persiapakan code html atau kode yang lain untuk kita bisa share di postingan blog.

2. Menampilkan kode di postingan blog

a. WordPress

Untuk langkah ini ikirangga akan menjelaskan bagi sahabat yang menggunakan platform WordPress untuk blognya. Untuk WordPress saya akan menggunakan cara pertama yang menggunakan pre.

  1. Di tahap periapan kita telah membahas untuk membuat postingan yang nantinya akan kita gunakan untuk posting code tersebut.
  2. Buka postingan blog yang telah kita buat sebelumnya dan arahkan ke mode text untuk menyisipkan code tersebut.
  3. Di awal code kita harus tuliskan <pre> dan di akhir code kita harus tulis dengan </pre>. cara posting dengan pre di wordpress
  4. Setelah itu pindahkan ke mode Visual dan sahabat akan melihat code tadi akan tersusun dengan rapi. Berikut adalah contoh penerapan pre di blog ini. Kode ini adalah salah satu contoh yang saya ambil dari postingan install zte mf90 dengan b10 beeline.
    fastboot devices 
    fastboot oem unlock 
    fastboot oem device-info 
    fastboot flash dsp2 dsp2.mbn
    fastboot flash system 9615-cdp-image-9615-cdp.yaffs2 
    fastboot flash userdata 9615-cdp-usr-image.usrfs.yaffs2 
    fastboot flash ztedata 9615-cdp-ztedata-image.usrfs.yaffs2 
    fastboot flash efs2 efs.mbn 
    fastboot flash recoveryfs 9615-cdp-recovery-image-9615-cdp.yaffs2 
    @echo off 
    echo ================================================================
    echo pastiin ke enam file sudah sukses terkopi ke modem, jika belum 
    echo close command prompt ini, pake tanda silang diatas noh, 
    echo lalu ulangi lagi proses fastbootnya. jika sudah ok,lanjut enter! 
    echo ================================================================ 
    timeout /t 50 
    fastboot reboot 
    timeout /t 10 
    exit

b. Blogger

Untuk langkah ini ikirangga akan menjelaskan untuk sahabat yang menggunakan platform Blogger. Pada platform blogger kita akan menggunakan hilite.me. Mengapa tidak menggunakan pre? Setelah saya coba ternyata tidak rapi untuk digunakan di blogger.

  1. Sama seperti yang kita perlakukan di WordPress, buka postingan yang akan kita letakkan code htm atau code yang lainnya.
  2. Kita sekarang menuju ke halaman hilite.me. Kita akan menemukan halaman dari hilite.me yang seperti di bawah ini.tampilan hilite.me
  3. Pada kotak Source Code kita meletakkan code yang akan kita post di dalam postingan blog. Setelah itu kita bisa menekan tombol highlight dan akan mendapatkan kode yang kita posting di dalam kotak HTML. Di bawah kotak tersebut akan terdapat kolom preview bentuk dari postingan kode yang akan kita letakkan di dalam postingan blog.hasil highlight di hilite.me
  4. Copy code HTML yang berada pada kolom HTML dan letakkan kode tersebut di postingan yang telah dibuat. Sebagai contohnya seperti di bawah ini untuk hasilnya.
    adb devices 
    adb push C:\wlan_ap_config.conf /zte/zteconf/wlan/ 
    adb push C:\wlan_ap_config.conf.bak /zte/zteconf/wlan/ 
    timeout /t 15 
    exit
    

Bagaimana sahabat ikirangga sudah paham dengan cara yang saya share di artikel kali ini? Jika masih bingung bisa sahabat tanyakan di kolom komentar ya.

Terima kasih sudah berkunjung di ikirangga blog. Semoga artikel yang disajikan berguna untuk sahabat di seluruh Indonesia. Artikel ini bisa juga di share di semua media sosial yang teman – teman miliki.

LEAVE A REPLY

Please enter your comment!
Please enter your name here