Menambahkan Source Code pada postingan Blog | Cara membuat Kolom Koding pada Halaman Blog

Membuat postingan terkait Pemrograman, tentunya kurang pas apabila  tidak diberikan contoh source codenya. Source code suatu program biasanya akan rusak atau susah terbaca apabial diposting begitu saja pada blog. Terlebih lagi jika contoh source codenya berupa html, javascript, php ataupun bahasa lain yang biasa dijalankan di browser.

dan untuk mengubah metode postingan source code agar mudah dibaca seperti dibawah ini :

Bisa dilakukan dengan berbagai cara, salah satunya dapat dilakukan dengan menggunakan situs Pastebin

Disarankan untuk registrasi saja supaya mudah mengontorl coding-conding yang kita ubah, dan nanti ketika sudah masuk situsnya akan tampil form seperti dibawah ini

Form untuk input Source Code


Lalu pada form tersebut kita pastekan source code yang kita ingin tampilkan di blog, seprti contoh dibawah :


Proses input pada Form di Pastebin

Lalu pada setelah kita pastekan sourcodenya, scroll kebawah dan kita akan menemukan konfigurasi untuk :
  • Syntax Highlighting : diisi saja dengan jenis source code yang kita punya, dalam hal ini adalah PHP
  • Paste Expiration : tidak diisi, supaya tetap ada
  • Paste Exposure : diset saja ke Publik
  • Folder : bisa dipilih dengan folder yang dimiliki di akun pastebin ataupun kalau tidak ada juga tidak apa
  • Paste Name/Title : isi saja dengan nama yang diinginkan
  • dan terakhir pilih CREATE NEW PASTE, seperti pada gambar dibawah


Ketika sudah, maka akan muncul Jendela Sample, disini kita pilih EMBED
Lalu pada Pilihan berikutnya akan Muncul pilihan Embed nnti kita akan ditanya mau pilih yang mana?
  1. JavaScript Embedding : akan memunculkan jendela pastebin di postingan sepanjang jumlah baris codingnya
  2. Iframe Embedding : akan memunculkan tambahan bingkai dengan scroll sehingga apabila source codenya panjang tidak akan menghabiskan banyak tempat
dan pada saat ini yang dipilih adalah pilihan kedua (iframe) seperti pada gambar dibawah:


Jendela Pilihan Embed

Kembali lagi ke Postingan Blogger, disini baris code Iframe dari pastebin kita tambahkan pada postingan. 

Caranya pada kolom postingan, pada sudut kiri atas, ada icon pensil, itu kita klik dan akan muncul pilihan HTML, dan kita pilih yang HTML


Ketika kita pilih HTML maka akan muncuk seperti dibawah ini , nah disinilah kita pastekan kode Iframe dari Pastebin tadi

Maka Hasil Akhirnya akan tampil seperti dibawah ini :


Oh iya, Kode yang kita dapat dari pastebin kan seperti ini :



kita tambahkan saja disebelah kanan dari Iframe height:400px atau berapapun tinggi yang diinginkan untuk mengungubah ketinggian jendela iframe sesuai kebutuhan kita sperti pada contoh dibawah ini :


Rate this article

Getting Info...

1 comment

  1. Terimakasih tutorialnya bang...

Copyright ©Celitama.com - All rights reserved.

Redesign by bloggun.xyz
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details