Cara Membuat Tampilan Kode yang Cantik di Blogspot

Adam Muiz

Diperbarui: 14 Apr, 2025 • 0 • menit membaca

Daftar Isi

Menampilkan potongan kode (code snippet) di Blogspot bisa jadi tantangan tersendiri. Secara default, Blogger hanya menampilkan teks biasa tanpa warna, tombol copy, atau fitur menarik lainnya.

Padahal, tampilan kode yang menarik sangat penting, apalagi kalau kamu menulis blog seputar programming, tutorial, atau tips seputar website.

Nah, di artikel ini, kita akan membahas cara membuat tampilan kode yang berwarna-warni, ada tombol copy-nya, dan tetap ringan, langsung di Blogspot. Kita akan menggunakan Prism.js, yaitu library ringan untuk syntax highlighting, ditambah plugin tombol copy.

Kenapa Harus Prism.js?

Prism.js adalah salah satu library paling populer dan ringan untuk menampilkan kode dengan syntax highlighting. Keunggulannya:

Ringan dan cepat
Banyak pilihan tema (light dan dark)
Mendukung banyak bahasa pemrograman (HTML, CSS, JS, Python, dll)
Ada plugin tambahan seperti tombol copy, toolbar, dan line numbers

Apa Saja yang Akan Kita Buat?

✅ Syntax Highlighting (warna-warni sesuai bahasa)
✅ Tombol Copy untuk menyalin kode dengan sekali klik
✅ Tampilan rapi dan responsif
⚠️ (Opsional) Edit-in-place: pengguna bisa mengedit langsung kode di dalam browser

Langkah-Langkah

1. Tambahkan CSS dan Prism.js ke <head>

Masuk ke dashboard Blogger > Theme > Klik ikon panah ▼ > Edit HTML
Lalu, tambahkan kode ini sebelum </head>:


<!-- Prism.js Theme CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />

<!-- CSS untuk tombol toolbar -->
<style>
.code-toolbar {
  position: relative;
}
.code-toolbar .toolbar {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
.toolbar-item {
  background: #eee;
  border: 1px solid #ccc;
  padding: 0.25em 0.5em;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

2. Tambahkan JavaScript Sebelum </body>

Cari bagian paling bawah template kamu, lalu tempelkan sebelum </body>:


<!-- Prism.js Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- Toolbar Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />

<!-- Copy to Clipboard Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

3. Gunakan Format Kode Ini di Artikel Kamu

Ketika membuat artikel baru di Blogspot, buka editor dalam mode HTML, lalu gunakan struktur berikut untuk menampilkan potongan kode:


<pre class="language-html"><code class="language-html">
<h1>Halo, dunia!</h1>
</code></pre>

Kamu bisa ganti language-html dengan bahasa lain seperti language-javascript, language-css, language-python, dll, tergantung jenis kode yang ingin kamu tampilkan.

4. (Opsional) Bikin Kode Bisa Diedit Langsung

Kalau kamu ingin memberi fitur “edit langsung” pada kode (misalnya biar user bisa mengetik di situ), kamu bisa menambahkan contenteditable="true" seperti ini:


<pre><code contenteditable="true">console.log("Halo Dunia!");</code></pre>

Catatan: fitur ini tidak kompatibel dengan Prism.js karena Prism hanya membaca konten statis, bukan live-edit.

Tips Tambahan

Jangan aktifkan fitur minify HTML atau lazy-load JS dari template atau plugin pihak ketiga seperti Rocket Loader.
Kalau kamu menggunakan tema klasik Blogger, proses ini lebih mudah. Tapi kalau pakai tema modern (responsive, customizer, dll), pastikan script benar-benar diletakkan di HTML template, bukan di gadget/widget.

Contoh Hasil Akhir


function helloWorld() {
  console.log("Hello, world!");
}

Dan akan muncul tombol “Copy” di pojok kanan atas kode yang memudahkan pembaca menyalin kode ke clipboard.

Kesimpulan

Dengan bantuan Prism.js dan beberapa baris kode tambahan, kamu bisa membuat tampilan kode yang tidak hanya fungsional, tapi juga menarik secara visual.

Pembaca akan lebih nyaman memahami potongan kode, dan blog kamu terlihat lebih profesional. Fitur tombol copy juga meningkatkan user experience, terutama untuk blog tutorial coding.

Kalau kamu merasa tutorial ini membantu, jangan lupa share dan tinggalkan komentar. Dan kalau kamu butuh bantuan implementasi langsung, tinggal bilang aja – aku siap bantu!

Adam Blog