Cara membuat ciri "Click to Copy" pada blog

CUBA TRY TEST

Pastikan untuk menambahkan CSS dan JavaScript di bagian yang sesuai pada halaman blog Anda. Setelah selesai, pengguna dapat mengklik tombol "Copy" untuk menyalin konten yang diinginkan

Untuk membuat ciri "click to copy" pada blog, Anda dapat menggunakan HTML, CSS, dan JavaScript. Berikut adalah contoh implementasi sederhana:

1. HTML:

```html

<div id="copy-content"> <p>Your content here</p> <button onclick="copyToClipboard()">Copy</button> </div>

```

Pastikan setiap konten yang ingin Anda salin dikelompokkan dalam elemen dengan id "copy-content".

2. CSS:

```css

#copy-content { position: relative; } #copy-content:after { content: "Copied!"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: #4CAF50; color: white; padding: 5px; border-radius: 5px; opacity: 0; transition: opacity 0.3s; } #copy-content.copied:after { opacity: 1; }

```

Gaya CSS ini menambahkan efek "Copied!" yang muncul setelah tombol di klik.

3. JavaScript:

```javascript

function copyToClipboard() { var content = document.getElementById("copy-content"); var range = document.createRange(); range.selectNode(content); window.getSelection().addRange(range); try { document.execCommand("copy"); content.classList.add("copied"); setTimeout(function() { content.classList.remove("copied"); }, 2000); // Hapus efek "Copied!" setelah 2 detik } catch (e) { console.error("Failed to copy content"); } window.getSelection().removeAllRanges(); }

```

Fungsi `copyToClipboard()` akan memilih seluruh konten di dalam elemen dengan id "copy-content", menyalinnya ke clipboard, dan memberikan efek "Copied!". Setelah 2 detik, efek tersebut akan hilang kembali.

Pastikan untuk menambahkan CSS dan JavaScript di bagian yang sesuai pada halaman blog Anda. Setelah selesai, pengguna dapat mengklik tombol "Copy" untuk menyalin konten yang diinginkan.