Cara Membuat tag pre Double Click to Copy

Cara membuat tag <pre> dengan fitur double click untuk mengcopy

Pernahkah Anda merasa kesulitan saat ingin berbagi kode atau teks panjang di blog? Atau mungkin Anda ingin pengunjung dapat dengan mudah menyalin konten tersebut tanpa harus melakukan seleksi manual? Nah, di artikel ini, kami akan membahas cara membuat tag <pre> dengan fitur double click untuk mengcopy . Fitur ini tidak hanya meningkatkan user experience (UX) tetapi juga memberikan nilai tambah bagi audiens Anda.

Tak hanya itu, kami juga akan memastikan bahwa tutorial ini ramah SEO (Search Engine Optimization), sehingga Anda bisa mengimplementasikannya tanpa khawatir merusak performa blog Anda di mesin pencari. Dengan kata kunci seperti "cara membuat tag pre double click copy" , "fitur copy paste otomatis di blog" , dan "optimasi tag pre untuk SEO" , artikel ini dirancang untuk membantu Anda mendapatkan peringkat lebih baik di Google.

Jadi, jika Anda siap untuk meningkatkan kualitas konten blog Anda sekaligus memberikan pengalaman terbaik bagi pembaca, mari kita mulai! Simak panduan lengkapnya di bawah ini.

Pada tutorial ini ada beberapa langkah diantaranya adalah

1. CSS : Gunakan position: relative pada <pre> dan position: absolute pada .copy-notification untuk mengatur posisi notifikasi.
2. JavaScript : Modifikasi kode JavaScript agar notifikasi ditampilkan di dalam elemen <pre>.
3. HTML : Tambahkan elemen copy-notification di dalam tag <pre> pada postingan. Elemen ini akan digunakan untuk menampilkan notifikasi saat teks berhasil disalin.

Baik langsung saja kita mulai!

Langkah pertama gunakan CSS berikut untuk mengatur tampilan notifikasi di dalam elemen <pre>. Taruh kode berikut pada <b:skin>

pre {
  position: relative; /* Agar notifikasi bisa diposisikan relatif terhadap pre */
  padding: 10px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  overflow: auto;
}

.copy-notification {
  position: absolute;
  top: 10px; /* Sesuaikan posisi vertikal */
  right: 10px; /* Sesuaikan posisi horizontal */
  background-color: #4caf50;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  display: none; /* Notifikasi disembunyikan secara default */
  z-index: 10; /* Pastikan notifikasi berada di atas teks */
}

Silakan warnanya disesuaikan dengan tema blog Anda agar lebih matching.

Langkah berikutnya adalah memasang JavaScript untuk Menyeleksi, Menyalin, dan Menampilkan Notifikasi. Taruh kode di bawah ini di atas </body>

document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll("pre");e.forEach(c=>{c.addEventListener("dblclick",async function(){try{const t=document.createRange();t.selectNodeContents(c);const n=window.getSelection();n.removeAllRanges(),n.addRange(t);var e=c.textContent;await navigator.clipboard.writeText(e);const o=c.querySelector(".copy-notification");o&&(o.style.display="block",setTimeout(()=>{o.style.display="none"},2e3))}catch(e){console.error("Gagal menyalin teks:",e)}})})});

Saatnya menerapkan di postingan.

Yang perlu diingat adalah saat membuat postingan dengan tag pre didalamnya, pastikan susunannya adalah seperti dibawah!

<pre>
  <div class="copy-notification">Teks berhasil disalin!</div>
  ---------------
  ---------------
  Kode/Tulisan Anda disini
  ---------------
  ---------------
</pre>

Demikian tutorial Cara Membuat tag pre Double Click to Copy. Semoga bermanfaat.