Cara Membuat Tombol Copy pada Syntax Highlighter

Halo semua, pada artikel ini saya akan membagikan cara menambahkan tombol salin (copy button) pada syntax highlighter di blog kamu. Jika sebelumnya kamu sudah menerapkan syntax highlighter, maka fitur ini bisa jadi pelengkap yang sangat berguna.

Dengan adanya tombol salin, pengunjung dapat dengan mudah menyalin kode yang kamu bagikan hanya dengan sekali klik — tanpa harus menyeleksi teks secara manual.

Langkah Membuat Tombol Copy pada Syntax Highlighter

Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode </style> atau ]]</b:skin>

.preCopy:hover{opacity:1}
.preCopy{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;opacity:.5;transition: opacity linear 0.5s;position:absolute;right:0;z-index:2;top:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg>") 40px / 15px no-repeat;background-color:#d9d9d9;color:#989b9f;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}
.preCopy.copyed{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=') 50px / 15px no-repeat;background-color:#d9d9d9;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}

Selanjutnya salin JavaScript dibawah ini dan letakan diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/
let preTag = document.querySelectorAll("pre");
async function copyCode(e) {
    const t = e.srcElement;
    t.innerText = "Copyed";
    let o = t.parentElement.querySelector("code").innerText;
    await navigator.clipboard.writeText(o), t.classList.add("copyed"), setTimeout((() => {
        t.classList.remove("copyed"), t.innerText = "Copy"
    }), 1e3)
}
preTag.forEach((e => {
    if (navigator.clipboard) {
        let t = document.createElement("button");
        t.classList.add("preCopy"), t.innerText = "Copy", t.addEventListener("click", copyCode), e.appendChild(t)
    }
}));
/*]]>*/</script>

Cara Menggunakan

Untuk menampilkan kotak kode dengan tombol salin, cukup gunakan tag berikut pada editor HTML kamu:

<pre><code>
Tulis kode kamu di sini...
</code></pre>

Contoh output di blog akan menampilkan kotak syntax dengan tombol "Copy" di pojok kanan atas.

Penutup

Itulah cara mudah menambahkan tombol copy otomatis pada syntax highlighter Blogger. Dengan fitur ini, blog kamu akan terlihat lebih profesional dan memberikan kemudahan bagi pengunjung dalam menyalin potongan kode.

Kalau ada pertanyaan atau kendala, jangan ragu untuk menuliskannya di kolom komentar. Jangan lupa baca juga artikel lainnya seputar tips dan trik blogging.