Cara Membuat Tombol Copy Di Syntax Highlighter - WESTOIKU

 Tombol Copy Dengan Satu Kali Klik

Westoiku.

Seputar internet blogging yang membahas mengenai tentang berbagai tutorial.

Pada artikel sebelumnya sudah kami buatkan artikel tentang cara membuat syntax highlighter di postingan blogger ,dan untuk kali ini westoiku ingin berbagi tutorial tentang cara membuat tombol copy pada bagian pojok atas. 

Manfaat dari tombol copy di syntax highlighter yaitu memudahkan pengunjung untuk melakukan copy code yang terdapat di bagian dalam syntax. Hanya dengan satu kali klik tombol maka akan secara otomatis kode kode tersebut yang berada di dalam syntax akan langsung tercopas.

Dengan cara ini sangat cocok untuk para blogger yang templatenya secara sengaja sudah di pasang scryipt anti copy paste !!

Secara umum , template yang sudah dipasang script anti copas secara keseluruhan baik artikel postingan maupun bagian blackquote, pre code , akan membuat pengunjung kesulitan untuk mengambil kode , salinan text nya.

Maka dengan cara ini adalah solusi yang paling tepat . 

Sobat hanya perlu menambahkan kode dibawah ini , supaya pengunjung bisa dengan mudah copy kode script nya.

Cara Memasang Tombol Copied Di Syntax Highlighter

Untuk caranya cukup mudah , asal sobat menaruh kode ini secara benar.

1. Buka Akun Blogger.

2. Pilih Thema , Edit HTML.

Lalu cari kode  </b:skin>

Taruh kode ini tepat diatasnya.

ini code nya gaes..

.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}

Klik Simpan. !!

Langkah selanjutnya cari kode </body>

Taruh kode ini tepat diatasnya.

ini code nya gaes..

<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>

Klik Simpan. !! 

Selesai.

Demikian cara membuat tombol copy pada syntax.

Semoga dengan artikel ini bisa membantu sobat yang lagi membutuhkan , dan lagi mencari artikel seperti pada judul.

Berikut adalah beberapa manfaat dari tombol copied pada kolom syntax.

Manfaat Tombol Copy Pada Kolom Syntax.

•  Tampilan Syntax Menjadi Lebih Kreatif.
•  Bisa Dengan Mudah Mengcopied.
•  Hanya Dengan Satu Kali Klik.
•  Memudahkan Pengunjung untuk Mengambil Kode nya.
•  Fitur Blogger Menjadi Lebih Keren.

Kesimpulan :

Pada tutorial yang saya posting kali ini adalah saya menggunakan kode syntax versi mbak iqniel.

Jika sobat ingin membuat syntax seperti pada contoh , sobat bisa mencari artikel saya yang membahas mengenai tentang cara membuat syntax , atau tentang cara menggunakan syntax highlighter.