Cara Membuat Tombol Copy Code Pada Syntax Highlighter

cara transfer/withdraw saldo PayPal ke GoPay
Cara Membuat Tombol Copy Code Pada Syntax Highlighter.
Daftar Isi
  1. Cara Membuat Tombol Copy Code Pada Syntax Highlighter
    1. Tombol Copy Code Style 1
    2. Tombol Copy Code Style 2
  2. Penutup

Cara membuat dan memasang tombol copy code pada syntax highlighter - Syntax highlighter adalah salah satu fitur yang biasanya digunakan pada sebuah situs yang membagikan tutorial seputar koding untuk menyoroti atau membungkus seluruh kode-kode markup seperti HTML, CSS, JavaScript dan bahasa pemrograman lainnya pada halaman website atau blog.

Syntax highlighter ini berguna untuk membedakan antara tulisan biasa atau paragraf artikel dengan kode-kode markup atau script seperti HTML, CSS, Javascript, PHP atau yang lainnya. Sehingga pembaca dapat mengenali dan membedakan antara tulisan paragraf biasa dengan kode-kode markup yang perlu mereka salin.

Syntax highlighter ini juga kerap digunakan pada blog yang menggunakan platfrom Blogger seperti blog saya ini. Secara default, setiap template bawaan Blogger sudah dilengkapi dengan CSS syntax highlighter ini, terlebih lagi jika kamu menggunakan template buatan sendiri.

Di artikel kali ini saya akan membagikan tutorial cara membuat tombol copy code pada syntax highlighter agar pembaca yang ingin menyalin script yang telah dibagikan bisa menyalin seluruh script atau kodenya dengan lebih mudah dan lebih cepat. Untuk tutorial cara membuat dan memasang tombol copy code pada syntax highlighter di blog, kamu bisa ikuti langkah-langkah di bawah ini.

Cara Membuat dan Memasang Tombol Copy Code Pada Syntax Highlighter

Perlu diingat, bahwa tutorial yang saya bagikan di artikel ini hanya membuat atau menambahkan tombol copy code pada syntax highlighter saja, jadi kamu tetap bisa menggunakan style CSS syntax bawaan template kamu masing-masing.

Dan terdapat dua jenis tampilan atau style tombol copy code yang saya bagikan di artikel ini, kamu bisa gunakan sesuai dengan style yang kamu inginkan.

Style Tombol Copy Code 1

  1. Buka dashboard Blogger kamu.
  2. Masuk ke menu Tema » Edit HTML.
  3. Setelah itu salin dan taruh kode CSS berikut tepat sebelum </style> atau ]]></b:skin>.
    .preCopy:hover{opacity:1}.preCopy{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;opacity:.5;transition:opacity linear 0.5s;position:absolute;right:0;z-index:2;top:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg>") 40px / 15px no-repeat;background-color:#d9d9d9;color:#989b9f;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}.preCopy.copyed{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=') 50px / 15px no-repeat;background-color:#d9d9d9;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}
  4. Selanjutnya salin dan taruh kode Javascript berikut sebelum atau di atas tag penutup </body>.
    <script>/*<![CDATA[*/
let preTag = document.querySelectorAll("pre");
async function copyCode(e) {
    const t = e.srcElement;
    t.innerText = "Copyed";
    let o = t.parentElement.querySelector("code").innerText;
    await navigator.clipboard.writeText(o), t.classList.add("copyed"), setTimeout((() => {
        t.classList.remove("copyed");
        t.innerText = "Copy";
    }), 1e3)
}
preTag.forEach((e => {
    if (navigator.clipboard) {
        let t = document.createElement("button");
        t.classList.add("preCopy"), t.innerText = "Copy", t.addEventListener("click", copyCode), e.appendChild(t)
    }
})
/*]]>*/</script>
  5. Jika semuanya sudah dipasang ke dalam template blog kamu, jangan lupa klik simpan.

Sampai sini CSS dan Javascript tombol copy code pada syntax highlighter berhasil dipasang ke dalam template. Untuk menggunakan atau menampilkan tombol copy code tersebut pada syntax highlighter yang kita inginkan, tambahkan class="preCopy" ke dalam tag HTML syntax yang biasa kamu gunakan.

Contoh, jika penggunaan syntax highlighter pada template kamu adalah menggunakan tag HTML <pre><code>...</code></pre> seperti yang digunakan pada kebanyakan template, maka untuk menggunakan tombol copy code tersebut pada syntax adalah <pre class="preCopy"><code>...</code></pre>.

Sedangkan jika penggunakan syntax pada template kamu adalah menggunaka tag <div>, maka tambahkan class="preCopy" ke dalam tag div tersebut. Sehingga menjadi <div class="preCopy">...</div>.

Style Tombol Copy Code 2

Pada tampilan atau style tombol copy code yang kedua ini akan muncul notifikasi pop-up di bagian bawah ketika pengunjung mengklik tombol copy code yang ada pada syntax highlighter. Tampilan yang kedua ini akan lebih banyak menggunakan kode CSS.

  1. Salin dan taruh kode CSS berikut di atas </style> atau ]]></b:skin>.
    /* Copy Code Button with SVG by NaminaBoky */
.cBox{position:relative;background:#fff;width:100%;border-radius:9px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cBox pre::before, .cBox pre::after{content:''}

/* Toast Notification Setting */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}

/* Dark Mode Setting */
.drK .cBox{background:#2d2d30}
.drK .cBox pre{background:#252526;color:#fffdfc}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  2. Setelah itu salin dan taruh kode HTML berikut di bawah tag <body>.
    <!--[ Toast Notification ]-->
<div id='toastNotif' class='tNtf'></div>

    Kode HTML di atas berguna untuk menampilkan notifikasi pop-up di bagian bawah layar (fixed) ketika pengunjung mengklik tombol copy code yang ada di syntax highlighter. Kamu bisa lewati langkah ini jika tidak ingin mengaktifkan notifikasi tersebut.

  3. Langkah yang terakhir, salin da taruh Javascript berikut di atas tag penutup </body>.
    <script>
/* Script Copy Code Button by NaminaBoky */
function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Script  Berhasil Disalin!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)}
</script>

    4. Untuk cara menampilkan atau menambahkan tombol copy code pada syntax highlighter yang kedua ini, gunakan kode berikut :

    <!--[ Syntax Highlight 1 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>HTML</span>
    <!--[ Copy Code Button ]-->
    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code1'>
    <pre>Taruh Kode HTML di sini...</pre>
  </div>
</div>

<!--[ Syntax Highlight 2 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>CSS</span>
    <!--[ Copy Code Button ]-->
    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code2'>
    <pre>Taruh Kode CSS di sini...</pre>
  </div>
</div>

<!--[ Syntax Highlight 3 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>JS</span>
    <!--[ Copy Code Button ]-->
    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code3'>
    <pre>Taruh Kode Javascript di sini...</pre>
  </div>
</div>
  4. Jika semuanya sudah jangan lupa klik simpan.

Penutup

Itu dia tutorial cara membuat tombol copy code pada syntax highlighter di blog menggunakan CSS dan Javascript. Semoga artikel ini bisa bermanfaat dan membantu. Jika ada yang ingin ditanyakan langsung saja tulis di kolom komentar.

Dukung NaminaBoky
Buy Me a Coffee Donasi via Buy Me a Coffee Trakteer Donasi via Trakteer Donasi via Saweria Donasi via Saweria Tentang Donasi ?

Artikel Terkait

0 Komentar