Membuat box code pre beserta tombol copy

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat box code beserta tombol copy di blogger

Info: Jika kamu penasaran degan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Box code

Apa itu box code? box code merupakan suatu tampilan custom yang di buat khusus untuk meletakkan dan menampilkan kode script entah itu kode CSS, kode HTML, ataupun kode Javascript, dan dari tampilannya bisa beraneka macam tergantung unsur kode yang di gunakan dan keinginanan pemilik website mengenai tampilan box code nya

Important: Kode yang akan di tampilkan di dalam bix code sebaiknya kamu parse terlebih dahulu, tapi jika unsur text seperti nya gak usah di parse

Tombol Copy

Menariknya pada box code yang admin bahas kali ini memiliki fungsi tombol copy alias tombol salin sehingga seluruh unsur kode di dalam box code bisa di copy paste dengan mudah, tidak hanya itu jika website anda memiliki fitur toast notif maka anda bisa mengkombinasikan dengan box code kali ini, karena setingan js sudah di sesuaikan agar mudah untuk mengedit beberapa elements javascript nya

Menggunakan Javascript

Untuk membuat serta menampilkan box code seluruh element kode yang di gunakan adalah kode javascript yang telah admin sederhanakan, sehinga pemuatan blog tidak akan terhambat karena penggunaan unsur javascript yang banyak, admin juga telah mensuaikan beberapa kode js nya seperti yang sudah admin jelaskan sebelumnya agar mudah dalam pengeditan js nya

Contoh Tampilan

Agar kamu tidak penasaran dengan tampilan box code beserta tombol copy di blogger, silahkan periksa langsung menggunakan tombol di bawah ini Oke

Periksa

Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak

Cara pembuatan

Baiklah sobat Icloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat box code yang elegan dan sangat mempesona ini, silahkan baca dan ikuti setiap arahan yang admin jelaskan 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>

.rahBox53{
--rahboxB:#DE3535/* Color button copy */;
--rahboxBho:#0e8135/* Color button copy after click*/}
.rahBox53 .rahBox53B .rah{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>");}
.rahBox53 .rahBox53B.rahCopied .rah{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>")}

Info: Kode CSS di atas sudah admin sesuaikan dengan kode JS dan kamu bisa mengedit warna tombol copy nya menggunakan kode CSS di atas

Kode Javascript

Langkah selanjutnya silahkan salin lagi kemudian tempelkan kode javascript di bawah ini di atas kode </body>

<script>/*<![CDATA[*/
var rahqSelNotif = '.rahtNtf'; /* Class css toast notif */
var rahcsIconCopy = 'clipboard'; /* Class icon toast notif */
var rahtxCopy = 'Berhasil menyalin'; /* Text rahCopied toast notif */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahBoxCp53.js'></script>

Info: Kamu bisa menyesuaikan fungsi class toast notif dan text copy toast notif jika blog kamu memiliki fitur toast notif, jika ingin memasang toast notif di blog kamu silahkan pelajari disini

Kode HTML

Untuk menampilkan dan memfungsikan box code nya silahkan kamu gunakan kode HTML di bawah ini saat kamu ingin memposting code didalam artikel milikmu

<!-- Box code 1 -->
<div class='rahBox53'>
<div class='rahBox53H'>
<span>JS</span>
<button id='copy531' class='rahBox53B' onclick="rahcopyC('copy531','code531')">
<i class='rah'></i>
</button>
</div>
<div class='rahBox53C' id='code531'>
<pre>Your_code_here</pre>
</div>
</div>
<!-- Box code 2 -->
<div class='rahBox53'>
<div class='rahBox53H'>
<span>JS</span>
<button id='copy532' class='rahBox53B' onclick="rahcopyC('copy532','code532')">
<i class='rah'></i>
</button>
</div>
<div class='rahBox53C' id='code532'>
<pre>Your_code_here</pre>
</div>
</div>
<!-- Box code 3 -->
<div class='rahBox53'>
<div class='rahBox53H'>
<span>JS</span>
<button id='copy533' class='rahBox53B' onclick="rahcopyC('copy533','code533')">
<i class='rah'></i>
</button>
</div>
<div class='rahBox53C' id='code533'>
<pre>Your_code_here</pre>
</div>
</div>

Info: Sebelum meletakkan kode di dalam box code, kamu harus memparse kode terlebih dahulu menggunakan Tools parse punya ICloudice.com

JS

<script> //<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxxxxxxxxx",
enable_page_level_ads: true,
overlays: {bottom: true}
});
//]]> </script>