Bagi para pengelola blog, terutama pengguna platform Blogger (Blogspot), mempercantik tampilan artikel adalah salah satu cara terbaik untuk membuat pembaca betah berlama-lama di halaman web. Salah satu elemen yang sering kali dibutuhkan oleh blogger khususnya yang gemar menulis tutorial pemrograman atau tips teknis adalah kotak script HTML atau code box yang rapi dan menarik.
Memiliki kotak kode yang bersih tidak hanya membuat blog Anda terlihat lebih profesional ala situs dokumentasi resmi, tetapi juga memudahkan pembaca untuk menyalin (copy) kode tanpa merasa pusing melihat teks yang berantakan.
Jika Anda ingin mempercantik tampilan blog Anda, mari kita bedah beberapa kumpulan kotak script HTML keren yang bisa langsung Anda pasang beserta kodenya!
Pentingnya Menggunakan Kotak Script yang Rapi di Blog
Sebelum masuk ke kode pemrogramannya, mari kita bahas mengapa elemen ini sangat krusial. Saat Anda membagikan potongan kode HTML, CSS, atau JavaScript di dalam artikel, jika Anda menuliskannya secara biasa tanpa wadah khusus, kode tersebut sering kali dieksekusi langsung oleh browser atau membuat pembaca kesulitan saat ingin menyalinnya.
Dengan menggunakan wadah khusus atau yang biasa disebut preformatted code block, Anda bisa:
- Menghindari error eksekusi script di dalam artikel.
- Memberikan kontras visual yang jelas antara teks artikel dan kode program.
- Membawa pengalaman membaca (user experience) ke tingkat yang lebih profesional.
1. Kotak Script Gaya Minimalis Modern (Clean Light)
Kotak script dengan tema terang (light mode) sangat cocok dipadukan dengan template blog bernuansa bersih dan rapi. Desain ini biasanya dilengkapi dengan latar belakang abu-abu terang dan border tipis di sisi kiri untuk memberikan aksen estetis.
Kode HTML & CSS:
<style>
.code-box-light {
background: #f8f9fa;
border-left: 4px solid #3b82f6;
font-family: 'Courier New', Courier, monospace;
padding: 15px;
margin: 20px 0;
overflow-x: auto;
border-radius: 0 6px 6px 0;
font-size: 14px;
color: #1f2937;
}
</style>
<div class="code-box-light">
<pre><!-- Contoh Script HTML Sederhana -->
<div class="container">
<h1>Halo, Dunia!</h1>
<p>Selamat datang di blog saya.</p>
</div></pre>
</div>
Preview Tampilan:
Tampilan: Kotak akan berwarna latar abu-abu sangat muda dengan garis tebal berwarna biru terang di sisi kiri, membuat blok kode terlihat sangat rapi dan mudah dibaca oleh mata.
2. Kotak Script Tema Gelap ala Editor Profesional (Dark Mode)
Bagi sebagian besar developer, melihat kode dengan latar belakang gelap (dark mode) terasa jauh lebih nyaman di mata, terutama saat membaca artikel di malam hari. Anda bisa menggunakan gaya kotak terminal gelap ini pada blog Anda.
Kode HTML & CSS:
<style>
.code-box-dark {
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Consolas', 'Courier New', monospace;
padding: 15px;
margin: 20px 0;
overflow-x: auto;
border-radius: 6px;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.code-box-dark .keyword { color: #569cd6; }
.code-box-dark .string { color: #ce9178; }
</style>
<div class="code-box-dark">
<pre><script>
<span class="keyword">function</span> <span class="string">sapaPembaca</span>() {
console.log(<span class="string">"Halo, selamat belajar coding!"</span>);
}
sapaPembaca();
</script></pre>
</div>
Preview Tampilan:
Tampilan: Latar belakang hitam pekat khas code editor profesional seperti VS Code, lengkap dengan teks kode berwarna abu-abu terang dan aksen warna khusus pada fungsi tertentu.
3. Kotak Script dengan Tombol Salin (Copy Button) Otomatis
Fitur yang paling diidamkan oleh pengunjung blog teknis adalah tombol Copy agar mereka tidak perlu memblok teks secara manual. Meskipun biasanya membutuhkan sedikit bantuan JavaScript tambahan di tema Blogger Anda, kerangka dasar tampilannya bisa dibuat semenarik ini.
Kode HTML & CSS:
<style>
.code-wrapper {
background: #0f172a;
border-radius: 8px;
margin: 20px 0;
overflow: hidden;
}
.code-header {
background: #1e293b;
color: #94a3b8;
padding: 8px 15px;
font-size: 12px;
font-family: sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
.code-content {
padding: 15px;
color: #e2e8f0;
font-family: monospace;
font-size: 14px;
overflow-x: auto;
margin: 0;
}
</style>
<div class="code-wrapper">
<div class="code-header">
<span>HTML / CSS Script</span>
<span>Contoh Kode</span>
</div>
<pre class="code-content"><a href="https://adiprayitno25.blogspot.com/" target="_blank">Kunjungi Blog</a></pre>
</div>
Preview Tampilan:
Tampilan: Memiliki bilah header di bagian atas layaknya jendela aplikasi editor sungguhan, memberikan kesan blog tutorial yang sangat kredibel dan interaktif.
Tips Memasang Kotak Script di Blogger
Agar penggunaan kotak script ini tidak merepotkan Anda setiap kali menulis artikel baru, Anda bisa menerapkan beberapa tips berikut:
- Gunakan CSS Eksternal: Simpan kode
<style>di atas ke dalam pengaturan tema Blogger Anda (pada bagian CSS kustom atau di atas tag]]></b:skin>), sehingga Anda hanya perlu memanggil elemen<div>dan<pre>saja di dalam editor postingan. - Perhatikan Karakter Khusus: Saat memasukkan kode HTML ke dalam tag
<pre>, pastikan Anda mengubah karakter<,>, dan"menjadi entitas HTML (seperti<,>, dan") agar tidak dianggap sebagai perintah asli oleh browser. Anda juga bisa menyematkan kumpulan kotak script untuk postingan yang sudah pernah dibahas sebelumnya untuk referensi tambahan. - Optimalkan Tampilan Mobile: Pastikan properti
overflow-x: auto;selalu disertakan agar jika kode terlalu panjang, kotak script dapat digeser ke samping tanpa merusak tata letak layar ponsel pembaca.
Kesimpulan
Menyediakan kotak script HTML yang keren dan fungsional di blog Anda adalah investasi kecil yang berdampak besar bagi kenyamanan pembaca. Dengan memilih desain yang bersih, baik itu gaya terang (light) maupun gelap (dark), blog tutorial Anda akan terlihat jauh lebih rapi dan profesional.
Bagi Anda yang sedang merintis blog dari nol, Anda juga bisa mempelajari tahapan lengkap membangun situs web melalui panduan dari nol sampai bikin website sendiri. Selamat mencoba bereksperimen dengan kodenya, dan semoga blog Anda semakin diminati pembaca!
Diskusi & Komentar