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 iniInfo: 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><!-- script kode disini --></pre></code>, untuk menampilkan box pre code nya, jika error hubungi aja admin, ok!, semoga bermanfaat