Menyisipkan Kode atau Script pada Artikel Blog

Labels: • •
Bismillah. Sebenarnya artikel tentang insert script code into blogger post atau menyisipkan kode-kode atau script kedalam artikel blog pernah dibahas pada artikel sebelumnya dengan memanfaatkan fasilitas plugin SyntaxHighlighter yang dikembangkan oleh Alex Gorbatchev. Dua artikel sekaligus telah di tulis untuk menjelaskan tentang Integrasi SyntaxHighlighter pada Blogger dan Konfigurasi SyntaxHighlighter pada Blogger. Namun pada artikel kali ini kita akan memanfaatkan fasilitas dari pihak ketiga tanpa menggunakan plugin. Pihak ketiga penyedia layanan insert code sebenarnya banyak, namun kali ini kita akan memanfaatkan fasilitas dari pastebin.com karena situs ini sudah cukup lama dan paling banyak digunakan oleh para blogger.

Kenapa memilih Pastebin?

Beberapa alasan berikut bisa menjadi pertimbangan kenapa memilih fasilitas dari Pastebin:
  • Mendukung banyak bahasa pemrograman
  • Tanpa perlu melakukan perubahan kode pada template
  • Bukan merupakan plugin bagi blog sehingga lebih ringan bagi blog (namun dipengaruhi kecepatan server Pastebin)
  • Pastebin menggunakan software syntax highlighting GeSHi yang telah mendapat penghargaan "Innovation Award" sebagai salah satu software dengan kualitas terbaik.
  • Kode/Script yang telah dibuat pada Pastebin akan tersimpan dengan baik sehingga lebih aman dan mudah jika suatu hari akan dilakukan perubahan/perbaikan kode/script.
  • Disediakan software pendukung untuk membuat dan mengelola kode/script yang telah kita buat pada Pastebin. Software Pastebin ini mendukung banyak platform, baik untuk Windows, iPhone, iPad, Android, Mac OS X, dan lain-lain.
  • Didukung pengembangan dengan API dan setiap pengguna memiliki API Key unik tersendiri.

Membuat kode pada Pastebin

Melalui Situs Pastebin
Langkah 1
Buatlah akun Pastebin, ikuti aturan pendaftaran.
Langkah 2
Login ke Pastebin dengan akun yang baru saja dibuat.
Langkah 3
Klik link "Create New Paste"
Langkah 4
Halaman "New Paste" terbuka dan masukan kode/script yang akan dibuat.
Langkah 5
Tentukan bahasa pemrograman yang digunakan pada "Optional Paste Settings". Contoh dibawah menggunakan bahasa JavaScript
Optional Paste Settings:
Syntax Highlighting : untuk menentukan bahasa pemrograman yang sesuai dengan kode/script yang dibuat
Paste Expiration : untuk menentukan batas ketersediaan kode di Pastebin
Paste Exposure : untuk menentukan ketersediaan secara umum (Public) atau pribadi (Private)
Paste Name / Title : untuk memberikan nama kode/script yang kita buat.
Setelah selesai menuliskan kode/script dan yakin, klik tombol "Submit"
Langkah 6
Jika kode/script yang kita buat ternyata mencurigakan maka Pastebin akan menampilkan "Spam Detection For Pastebin", jika anda yakin kode/script yang dibuat bukanlah untuk tujuan spam maka isikan "Enter Captcha" sesuai dengan yang tampil pada "Captcha Image" kemudian klik tombol "Submit"
Langkah 7
Sebuah jendela yang menampilkan dua kotak, kotak atas adalah kode yang sudah diberi sentuhan highlight sedangkan kotak bawah bersifat RAW untuk melakukan perubahan pada kode jika dianggap masih ada kekurangan.
Langkah 8
Klik link "EMBED" untuk menampilkan kode yang akan disisipkan pada artikel.
Langkah 9
Halaman "Embed Codes For Paste" terbukan dan kita diberikan dua metode penyisipan kode, pilih salah satunya. Apakah akan menggunakan "JavaScript Embedding" atau menggunakan 'Iframe Embedding". Metode yang paling aman adalah menggunakan yang kedua, namun yang paling sederhana menggunakan metode ke satu.
Langkah 10
Copy paste kode penyisipan pada artikel blog.

Melalui Software Pastebin
Langkah 1
Unduh (Download) software "Pastebin Desktop for Windows" karena kebetulan saya menggunakan sistem operasi Windows. Sesuaikan saja dengan sistem operasi anda.
Langkah 2
Install Software Pastebin
Langkah 3
Buka software Pastebin dan Login sesuai dengan akun yang telah kita buat sebelumnya.
Langkah 4
Sebuah jendela "New Paste" akan terbuka. Tentukan nama kode/script yang akan kita buat dan tuliskan kodenya.
Langkah 5
Untuk menentukan bahasa pemrograman yang kita gunakan, klik link "My Setting" dan sebuah jendela akan terbuka. Klik tombol "Save" jika setting-an sudah sesuai kebiasaan kita.
Ada beberapa option tambahan untuk versi software ini yaitu:
  • Link type : untuk menentukan link yang akan dibuat secara otomatis pada saat kita meng-klik tombol "Submit"
  • Quick paste key combination : untuk menentukan kombinasi tombol keyboard dalam membuat link baru
  • Copy the link to the clipboard automatically : untuk meng-copy link secara otomatis pada clipboard
  • Open the link in the browser automatically : untuk membuka link secara otomatis pada saat proses pembuatan kode telah selesai
  • Automatically start program when Windows starts : untuk mengaktifkan software secara otomatis pada saat sistem operasi diaktifkan pertama kali
Klik tombol "Submit" jika kode/script telah selesai dibuat.
Langkah 6
Sebuah link akan diberikan secara otomatis. Bukalah situs Pastebin dan carilah link "EMBED"
Langkah 7
Lakukan hal sama seperti yang kita lakukan (Lihat langkah 8 Melalui Situs Pastebin)

Menyisipkan Kode/Script pada Artikel Blog

Langkah 1
Login ke Blogger
Langkah 2
Buatlah sebuah artikel dan pindahkan pada mode "Edit HTML"
Langkah 3
Sisipkan (copy paste) script yang telah diberikan oleh Pastebin (lihat langkah 9 Melalui Situs Pastebin)
Langkah 4
Terbitkan artikel anda dan lihatlah hasilnya...
Langkah 5
Ambil makanan ringan dan duduk manis sambil menunggu pembaca budiman berkomentar...

Contoh kode dari Pastebin

Kode JavaScript Save The Environment

Kode CSS Save The Environment

Selamat mencoba dan semoga berhasil. Happy Blogging :)