Cara Membuat Tombol Copy Text atau Code Dalam Artikel Blog

Sintax Copy

Belajar.com - Tombol Copy Text atau Code HTML dalam artikel blog disebut dengan Sintax. Sintax merupakan tempat meletakkan sebuah kalimat atau sebuah code (HTML, CSS, Js) dalam sebuah artikel. 

Jika membagikan code html atau sintax di sebuah artikel di blog, maka membuat tombol sintax akan sangat memudahkan untuk pengunjung dari blog kamu, dengan adanya sintax copy, akan membuat membuat pengunjung dimudahkan dalam menyalin code html, css, atau js yang kamu bagikan.

Tombol sintax ini biasanya terletak di atas teks yang akan disalin, dengan berbagai tulisan atau gaya tombol seperti, Salin, Copy Clipboard, Copy, Copy Text, dan lain lain.

Untuk membuat Sintax Copy Text sangatlah mudah, kamu hanya perlu menambahkan code html, dan memasukkan teks atau code yang akan disalin oleh pengunjung di website kamu.

Perlu diketahui, sintax copy teks berbeda dengan sintax copy code (html, css, dan js). perbedaan terletak dalam cara kamu meletakkan teks yang akan di copy oleh penguna code kamu. pertama kita bahas dulu, langkah dalam membuat sintax copy text dalam artikel blog.

Sintax Copy Text

Langkah 1: Tambahkan Code Sintax Copy Text, langkah pertama adalah menambahkan code dibawah ini dalam artikel yang akan diberikan teks yang akan dicopy.

<style>
  .copy-container {
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
  }

  .copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #007BFF;
    color: #fff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
  }

  .copy-button:hover {
    background-color: #0056b3;
  }
</style>

<div class="copy-container">
  <p>Masukan Teks Disini.</p>
  <button class="copy-button" onclick="copyToClipboard()">Copy</button>
</div>

<script>
  function copyToClipboard() {
    var textToCopy = "Teks atau kode yang ingin Anda salin.";
    var tempInput = document.createElement("textarea");
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    alert("Teks atau kode telah disalin ke clipboard.");
  }
</script>

Langkah 2: Masukan text, langkah selanjutnya adalah masukan teks yang akan disalin oleh pengguna blog kamu pada bagian yang telah disediakan. misalnya kamu bisa memasukkan link, atau text lainnya.

Sintax Copy Code (HTML, Js, atau CSS)

Langkah 1: Tambahkan Code Sintax Copy Code, Langkah pertama adalah memasukkan code sintax copy code berikut.

<style>
  .copy-container {
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
  }

  .copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #007BFF;
    color: #fff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
  }

  .copy-button:hover {
    background-color: #0056b3;
  }
</style>

<div class="copy-container">
  <p>Masukan Code Yang Udah di Parse Disini.</p>
  <button class="copy-button" onclick="copyToClipboard()">Copy</button>
</div>

<script>
  function copyToClipboard() {
    var textToCopy = "Teks atau kode yang ingin Anda salin.";
    var tempInput = document.createElement("textarea");
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    alert("Teks atau kode telah disalin ke clipboard.");
  }
</script>

Langkah 2: Parse Code, Langkah selanjutnya adalah parse code html yang akan kamu bagikan, untuk parse code html kamu bisa mengunakan parse html generator.

Langkah 3: Masukan Code Yang Udah di Parse, Langkah selanjutnya adalah masukan code yang sudah kamu parse dengan parse html generator.

Itulah cara membuat sintax copy teks dan code untuk dipasang di artikel blog. kamu bisa menggunakan code untuk dipasang dalam artikel blog kamu.

Bonus:

Code Sintax Dengan Desain Berbeda

1. Sintax Copy Becround Berbeda.

<style>
  .copy-container {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
  }

  .copy-text {
    flex-grow: 1;
    font-size: 16px;
  }

  .copy-button {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
  }

  .copy-button:hover {
    background-color: #45a049;
  }
</style>

<div class="copy-container">
  <span class="copy-text">Teks atau kode yang ingin Anda salin.</span>
  <button class="copy-button" onclick="copyToClipboard()">Copy</button>
</div>

<script>
  function copyToClipboard() {
    var textToCopy = "Teks atau kode yang ingin Anda salin.";
    var tempInput = document.createElement("textarea");
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    alert("Teks atau kode telah disalin ke clipboard.");
  }
</script>

2. Tampilan Minimalis.

<style>
  .copy-container {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    display: flex;
    align-items: center;
  }

  .copy-text {
    flex-grow: 1;
    font-size: 16px;
  }

  .copy-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 12px;
    cursor: pointer;
  }

  .copy-button:hover {
    background-color: #0056b3;
  }
</style>

<div class="copy-container">
  <span class="copy-text">Teks atau kode yang ingin Anda salin.</span>
  <button class="copy-button" onclick="copyToClipboard()">Salin</button>
</div>

<script>
  function copyToClipboard() {
    var textToCopy = "Teks atau kode yang ingin Anda salin.";
    var tempInput = document.createElement("textarea");
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    alert("Teks atau kode telah disalin ke clipboard.");
  }
</script>

Itulah cara membuat sintax copy teks dan code html di blogger, Semoga dapat bermanfaat bagi pembaca. Terimakasih...