For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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

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



Contoh tombol copy pre code

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.