Bedah Website #15: Auto copy paste kode di postingan blog (versi 2) - MZAINI30

Senin, 04 Mei 2020

Bedah Website #15: Auto copy paste kode di postingan blog (versi 2)

Versi 2 ini merupakan perbaikan dari versi 1. Kalau kamu sudah pakai yang versi 1, berarti kalau mau pakai yang ini, dihapus dulu yang versi 1 itu.

Apa sih yang membedakan versi 2 ini daripada versi 1?

Kalau versi 1 itu kan:

- Nggak ada semacam tulisan "Click to copy". Jadi, pengunjung yang nggak tau cara main blog ini ya nggak tau.
- Notifikasi bahwa kode telah disalin, jauh banget di pojok kanan layar.

Nah, yang di versi 2 ini merupakan perbaikan dari versi 1. Kalau yang di versi 2 ini:

- Di atas setiap snippet kode, ada tulisan "Klik snippet kode untuk menyalin" dengan color gray. Jadi, perintahnya jelas gitu ya, kalau snippet kodenya diklik, maka dia akan tersalin.
- Ketika snippet kodenya diklik, tulisan yang tadinya "Klik snippet kode untuk menyalin" berubah menjadi "Kode sudah disalin" dengan color red. Jadi, nggak jauh-jauh tu notifikasinya.
- Karena notifikasinya persis di atas snippet kode, maka kita nggak perlu lagi Notify JS. Jadi, bisa kita buang.

Berikut ini adalah kodenya yang baru, yang menggantikan kode yang sebelumnya:

<!-- clipboard -->
<script src='https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'/>
<style>
  /*<![CDATA[*/
  pre {
    cursor: pointer;
  }
  .info {
    color: gray;
  }
  .sudah-disalin {
    color: red;
  }
  /*]]>*/
</style>
<script>
  //<![CDATA[
  $("pre").each(function() {
    $(this).attr("data-clipboard-text", $(this).find("code").text());
    $("<div class='info'>Klik snippet kode untuk menyalin</div>").insertBefore(this)
    return new ClipboardJS("pre");
  });
  $("pre").click(function() {
    $(".info").text("Klik snippet kode untuk menyalin")
    $(this).prev().html("<span class='sudah-disalin'>Kode sudah disalin</span>")
  });
  //]]>
</script>
<!-- /clipboard -->

Bagaimana menurutmu?

Share with your friends

2 komentar

  1. Wahh saya kaget adblocknya hha ungu ungu gitu :d.


    Untuk kode diatas masih nyari kesalahannya dimana huhuw, kok ditempatku nda bisa ya.. padahal udah coba coba tambahin pre dan code didalamnya..

    BalasHapus

Maskot Pelarang Adblock

Hallo Kak, Perkenalkan saya Zen. Untuk bisa mengakses situs kami, terlebih dahulu matikan atau non-aktifkan ekstensi AdBlock nya yaaa...

Ok , Saya Mengerti