Cara Mudah Membuat Code-Box Keren di Blogger (Lengkap dengan CSS & Contoh Script)
Bagi kamu yang suka berbagi script di blog, tentu ingin tampilan potongan kode terlihat rapi, mudah dibaca, dan menarik, kan? Nah, di artikel ini saya akan membagikan cara mudah membuat code-box di Blogger yang bisa kamu custom warna background-nya sesuai selera.
Apa Itu Code-Box?
Code-box adalah sebuah kotak khusus untuk menampilkan potongan kode (HTML, CSS, JavaScript, dll.) di dalam artikel blog. Dengan adanya code-box,
kode yang kamu tampilkan akan terlihat lebih rapi, bisa di-scroll jika terlalu panjang, dan tidak tercampur dengan tulisan artikel.
Yuk langsung saja, ikuti langkah-langkahnya berikut ini!
Contoh Hasil Code-Box
<h1>Hello World!</h1>
<p>Contoh tampilan code-box di Blogger</p>
Langsung saja,masuk ke Bloger > klik menu > Tema > Untuk style CSS nya salin dan tempel kode di bawah ini lalu SIMPAN .
.code-box {
position: relative;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
font-family: monospace;
font-size: 14px;
}
.copy-btn {
position: absolute;
top: 5px;
right: 5px;
background: #00BFFF;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.copy-btn:hover {
background: #87CEFA;
}
pre {
overflow-x: auto;
padding: 12px;
margin: 0;
white-space: pre;
}
Setelah CSS dipasang, sekarang tinggal masukkan potongan kode yang ingin ditampilkan di postingan. Caranya:
<div class="code-box">
<button class="copy-btn" onclick="copyCode(this)">Salin</button>
<pre>
<code>
TEMPEL KODE KAMU DI SINI
</code>
<pre>
</div>
Gunakan tag <pre> di dalam <div class="code-box"> agar kode tetap rapih sesuai barisnya.
Langkah selanjutnya,copy kode Script di bawah ini,Paste di atas tag </body>
<script>
function copyCode(button) {
var code = button.parentElement.querySelector("code").textContent;
navigator.clipboard.writeText(code).then(function() {
button.innerText = "Disalin!";
setTimeout(function() {
button.innerText = "Salin";
}, 2000);
}).catch(function(err) {
alert('Gagal menyalin: ' + err);
});
}
</script>
Cek kembali code yang di salin tadi,pastikan penutup code sudah benar dan code yang akan di tempel harus di edit dulu
Atau kalau ngga mau ribet Parser di sini ➡️ TN Code Parser Free
