Kode Membuat Box Script di Posting Blogger dengan tombol salin

Jika Anda ingin menampilkan kode dengan tampilan yang menarik dan menyertakan fungsi salin ke clipboard, berikut adalah panduan langkah demi langkahnya. Kode yang akan kita tambahkan akan memanfaatkan HTML, CSS, dan JavaScript untuk menciptakan kotak kode yang elegan dan fungsi salin ke clipboard yang mudah digunakan.

Langkah 1: Buka Dasbor Blogger

Buka dasbor Blogger dan pilih blog yang ingin Anda edit.

Langkah 2: Buat atau Edit Posting

Pilih "Pos" dan buat posting baru atau pilih posting yang sudah ada untuk diedit.

Langkah 3: Pilih Mode HTML

Saat Anda berada dalam editor posting, pilih mode HTML untuk memasukkan kode secara langsung.

Langkah 4: Tambahkan Kode

Tambahkan kode HTML berikut di dalam posting:

<style>
  /* CSS for styling the code box */
  .code-box {
    background-color: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    overflow: auto;
  }

  #code {
    margin: 0;
    font-size: 14px;
  }

  #copy-button {
    display: block;
    margin: 10px auto;
    padding: 10px;
    background-color: #61dafb;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease-in-out;
  }

  #copy-button:hover {
    background-color: #218fff;
  }
</style>

</p><div class="code-box">
  <pre id="code">Copy-paste kode disini</pre>
  <button id="copy-button">Copy to Clipboard</button>
</div>

<script>
  // JavaScript for adding the "Copy to Clipboard" functionality
  var copyButton = document.getElementById("copy-button");
  copyButton.addEventListener("click", function() {
    var code = document.getElementById("code").innerText;
    navigator.clipboard.writeText(code).then(function() {
      alert("Code copied to clipboard!");
    }, function(err) {
      console.error("Failed to copy code: ", err);
    });
  });
</script>

Langkah 6: Beralih ke Mode Editor (Tampilan Menulis)

Kembalikan posting ke mode editor, lalu copy-paste kode html, css, atau JavaScript ke bidang 'Copy-paste kode disni'.

Langkah 7: Simpan dan Tinjau

Simpan postingan Anda dan tinjau hasilnya. Sekarang, postingan Anda akan menampilkan kotak kode yang elegan dengan tombol "Copy to Clipboard." Pengunjung dapat dengan mudah menyalin kode tersebut ke clipboard mereka.

Dengan mengikuti langkah-langkah di atas, Anda dapat menambahkan kode keren dan berguna pada posting Blogspot Anda. Pastikan untuk memeriksa tampilan pratinjau atau langsung pada blog Anda setelah menyimpan postingan.