Cara Membuat Kotak Kode dengan Tombol Salin di Blogger

Membuat kotak kode dengan tombol salin pada postingan Blogger dapat menjadi fitur yang sangat berguna bagi pembaca Anda. Fitur ini memungkinkan mereka untuk dengan mudah menyalin dan menempelkan potongan kode dari blog Anda ke proyek mereka sendiri. Berikut adalah langkah-langkah untuk menambahkan kotak kode dengan tombol salin ke postingan Blogger Anda.

Langkah-langkah:

1. Masuk ke Dashboard Blogger:

   • Buka dashboard Blogger Anda dan pilih tema yang ingin Anda edit.

2. Edit HTML Tema:

   • Klik pada opsi 'Sesuaikan' dan pilih 'Edit HTML'.

3. Tambahkan CSS:

   • Tambahkan kode CSS berikut di dalam tag <style> untuk mendesain kotak kode dan tombol salin:

     .cBox{position:relative;background:linear-gradient(135deg,#f6f6f6,#e9e9e9);width:100%;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,0.1);padding:20px;margin:30px 0;transition:transform 0.3s ease}.cBox:hover{transform:translateY(-5px)}.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px 20px;outline:0;border:0;border-radius:50px;background:#056aff;color:#fff;font-weight:bold;transition:all 0.3s ease}.cBox .cBoxB:hover{opacity:0.8}.cBox .cBoxB.copied{background:#2dcda7}.cBox pre{min-height:350px;margin:0;background:#2b2b2b;padding:20px;border-radius:10px;color:#f8f8f2;font-size:0.9rem;font-family:'Courier New',Courier,monospace;overflow:auto;box-shadow:inset 0 0 10px rgba(0,0,0,0.1)}.cBoxH span{font-weight:bold}

4. Tambahkan JavaScript:

   • Tambahkan kode JavaScript berikut untuk mengaktifkan fungsi tombol salin:

     <script>
      function copyCode(e,t){var n=document.getElementById(e),o=document.getElementById(t),c=document.createRange(),d=window.getSelection();d.removeAllRanges(),c.selectNodeContents(n),d.addRange(c),document.execCommand("copy"),d.removeAllRanges(),o.textContent="Disalin",o.classList.add("copied"),setTimeout((function(){o.textContent="Salin",o.classList.remove("copied")}),3e3)}document.querySelectorAll("pre").forEach((function(e,t){var n=document.createElement("div");n.className="cBox";var o=document.createElement("div");o.className="cBoxH";var c=document.createElement("span");c.textContent="Kode:";var d=document.createElement("button");d.className="cBoxB",d.id="copyButton"+t,d.textContent="Salin",d.onclick=function(){copyCode("codeBox"+t,"copyButton"+t)},o.appendChild(c),o.appendChild(d),e.id="codeBox"+t,n.appendChild(o),n.appendChild(e.cloneNode(!0)),e.parentNode.replaceChild(n,e)}));</script>
     

5. Tambahkan Kotak Kode di Postingan:

   • Gunakan kode HTML berikut di dalam postingan Anda untuk menampilkan kotak kode dengan tombol salin:

     <pre>
         // Masukkan kode Anda di sini
       </pre>

Dengan mengikuti langkah-langkah di atas, Anda dapat menambahkan kotak kode dengan tombol salin ke postingan Blogger Anda, sehingga memudahkan pembaca untuk menyalin kode yang Anda bagikan.

Semoga artikel ini bermanfaat! Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya. 

Share Pin Share