Cara Membuat Kotak Script Pada Postingan Blog

Untuk menampilkan kode seperti yang Anda inginkan di Blogger, yaitu dengan tampilan dalam kotak khusus dan tombol "Copy Code" seperti contoh dibawah ini:

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('Catatan')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Berikut scriptnya. 

<style>

  .code-container {

    position: relative;

    background-color: ghostwhite; /* Warna latar belakang ghostwhite */

    border-left: 5px solid red; /* Garis tepi kiri berwarna merah */

    padding: 20px;

    font-family: 'Trebuchet MS', sans-serif; /* Font sesuai permintaan */

    box-sizing: border-box;

    margin: 20px 0;

  }

  .code-container pre {

    margin: 0;

    overflow-x: auto;

    white-space: pre-wrap;

    color: black; /* Warna teks hitam */

    text-align: left;

  }

  .copy-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: #4caf50;

    color: white;

    border: none;

    padding: 5px 10px;

    cursor: pointer;

    border-radius: 5px;

  }

  .copy-btn:hover {

    background-color: #45a049;

  }

</style>

<div class="code-container">
  <button class="copy-btn" onclick="copyToClipboard()">Copy code</button>
  <pre><code id="code-content">

................................
Isi text script disini

................................

  </code></pre>
</div>
<script>
  function copyToClipboard() {
    var code = document.getElementById("code-content").innerText;
    var textarea = document.createElement("textarea");
    textarea.value = code;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
    alert("Code copied to clipboard!");
  }
</script>