Membuat Tombol Copy pada Syntax Highlighter

Hallo semua, pada halaman ini saya akan membagikan cara membuat tombol copy pada syntax highlighter. Karena sebelumnya saya sudah membagikan cara membuat syntax highlighter jadi bisa dibilang ini sebagai pelengkapnya.

Dengan menambahkan tombol copy tentu akan mempermudah para pengunjung ketika menyalin text atau kode yang kamu sediakan. 

Jika kamu tertarik membuatnya langsung aja yuk ikuti langkah-langkahnya dibawah ini:

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>

Jika sudah silahkan simpan, untuk melihat hasil cukup menggunakan tag <pre><code></code></pre>. Berikut contohnya:

<pre><code>Text atau kode script disini...</code></pre>

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.