Membuat tombol copy pre code

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat tombol copy pre code dengan mudah dan gampang

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama Sama

Tombol Copy

Tombol copy atau tombol salin kode merupakan fitur untuk memudahkan bagi setiap pengunjung mengutip text atau apapun di dalam website, biasanya tombol copy di sediakan untuk menyalin link dan juga kode script atau lebih tepatnya menyalin box pre code secara mudah dengan adnya fitur tombol copy tersebut

Pre code

Khusus dalam pembahasan kita kali ini admin bakalan menjabarkan mengenai cara membuat tombol copy pada box pre code, sehingga siapapun bisa lebih mudah mengutip kode ataupun text di dalam script box pre code tersebut, nah posisi dari tombol pre code tersebut nantinya akan berada di sebelah kiri pada halaman box pre code sehingga tidak bentrok dengan tampilan lainnya di dalam box pre code, karena setiap template memiliki perbedaan dan keunikan sehingga membuat posisi dari tombol copy tersebut sangat cocok sekali jika di terapkan

Menggunakan Javascript

Untuk membuat tombol copy pada box pre code cukup menggunakan kode javascript saja, namun penggunaan kode CSS juga di gunakan untuk membuat tampilan dari Icon Copy semakin keren, nah karena ada unsur kode javascript pastikan agar kamu menaruh kode javascript secara benar agar tidak membuat blog kamu menjadi lambat

Contoh Tampilan

Baiklah agar kamu tidak penasaran dengan contoh tampilan dari tombol copy box pre code tersebut silahkan periksa menggunakan tombol di bawah ini

Periksa

Info: Bagaimana sobat contoh tampilan meng agungkan sekali yak

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjelaskan mengenai cara membuat tombol copy pada box pre code, silahkan baca dan ikuti setiap arahan yang admin berikan di bawah ini

Kode CSS

Langkah pertama seperti biasa silahkan salin dan gunakan kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

/* Copy botton */ 
.rahCpy:hover{opacity:1}.rahCpy{opacity:.5;transition: opacity linear 0.5s;position:absolute;left: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:rgba(88,101,111,.63);color:#fff;border:none;font-size:10px;line-height:2.2em;border-radius:4px 0 4px 0;padding:5px 29px 5px 8px}
.drK .rahCpy{background-color:#2d2d30!important}
.rahCpy.rahCpyed{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=') 50px / 15px no-repeat;background-color:rgba(88,101,111,.63);border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}
.rahCpy{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya sobat bisa menyalin lagi kode Javascript di bawah ini, kemudian letakkan di atas kode </body>

<script>
/*<![CDATA[*/ 
var _0x4284=["\x70\x72\x65","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72\x41\x6C\x6C","\x73\x72\x63\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x44\x69\x73\x61\x6C\x69\x6E","\x63\x6F\x64\x65","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x70\x61\x72\x65\x6E\x74\x45\x6C\x65\x6D\x65\x6E\x74","\x77\x72\x69\x74\x65\x54\x65\x78\x74","\x63\x6C\x69\x70\x62\x6F\x61\x72\x64","\x72\x61\x68\x43\x70\x79\x65\x64","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x72\x65\x6D\x6F\x76\x65","\x53\x61\x6C\x69\x6E","\x62\x75\x74\x74\x6F\x6E","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x72\x61\x68\x43\x70\x79","\x63\x6C\x69\x63\x6B","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68"];let preTag=document[_0x4284[1]](_0x4284[0]);async function copyCode(_0xd8c9x3){const _0xd8c9x4=_0xd8c9x3[_0x4284[2]];_0xd8c9x4[_0x4284[3]]= _0x4284[4];let _0xd8c9x5=_0xd8c9x4[_0x4284[7]][_0x4284[6]](_0x4284[5])[_0x4284[3]]; await navigator[_0x4284[9]][_0x4284[8]](_0xd8c9x5),_0xd8c9x4[_0x4284[12]][_0x4284[11]](_0x4284[10]),setTimeout((()=>{_0xd8c9x4[_0x4284[12]][_0x4284[13]](_0x4284[10]),_0xd8c9x4[_0x4284[3]]= _0x4284[14]}),1e3)}preTag[_0x4284[21]](((_0xd8c9x3)=>{if(navigator[_0x4284[9]]){let _0xd8c9x4=document[_0x4284[16]](_0x4284[15]);_0xd8c9x4[_0x4284[12]][_0x4284[11]](_0x4284[17]),_0xd8c9x4[_0x4284[3]]= _0x4284[14],_0xd8c9x4[_0x4284[19]](_0x4284[18],copyCode),_0xd8c9x3[_0x4284[20]](_0xd8c9x4)}}))
/*]]>*/
</script>

Info: Kode javascript di atas sudah admin enscripsi, jika ingin mengenscriptsi kode silahkan klik disini ok!

Penjelasan

Nah setelah menginstal kode CSS dan juga kode javascript yang saya berikan di atas, kemudian untuk menggunakan silahkan pakai tag <pre><code></pre></code>, untuk menampilkan box pre code nya, jika error hubungi aja admin, ok!, semoga bermanfaat

Contoh tombol copy pre code

ICloudice.com

Auto Theme Changer

Auto Themer