Membuat boks copas beserta tombol copy all dengan CSS

Membuat Teks Area beserta tombol copy all pada postingan blog. Boks copas atau text area biasanya sering kita lihat pada blog yang membahas tutorial tentang perkodean atau koding , Text Area ini digunakan untuk menampilkan skrip yang dibutuhkan untuk kemudian salin.

Sedikit cerita : ada beberapa blog yang pernah saya kunjungi dan blog tersebut juga membahas tutorial tentang HTML dan menyediakan skrip untuk kita salin , tapi anehnya blog tersebut malah memasang skip anti copas yang menyebabkan skrip yang mereka sediakan tidak dapat di copy (disalin).... Kan aneh... hehe...

Dan pada kesempatan kali ini saya akan membagikan tutorial tentang cara memasang boks copas beserta tombol copy all menggunakan CSS, fungsi dari tombol copy all itu akan memudahkan pengguna untuk menyalin skrip yang ada pada kotak skrip tersebut. Sehingga pengguna tidak perlu repot untuk menyalin skrip yang panjang. Karena kita hanya membutuhkan satu kali klik dengan tombol ini.

Ok kita Langsung saja ke tutorialnya .
Pertama silahkan kalian salin skrip CSS berikut. Sekalian sebagai DEMO karena skrip yang akan kalian gunakan akan menghasilkan bentuk yang sama dengan boks di bawah ini.

Skrip CSS

.js-copytextarea { border:1px solid #4169E1; border-left:15px solid #4169E1; border-radius: 5px; background:#eee; color: black; display:block; margin:0 0 5px 0; word-break: break-all; text-align:left; width:95%; height:150px; overflow:auto; } .js-textareacopybtn { border-radius: 5px; color: white; background: #4169E1; font-weight: bold; } .js-buttoncopy { text-align: center; }

Kemudian kalian masuk dasbor blogger kalian dan pilih opsi tema / template, selanjutnya klik edit HTML.
Kemudian kamu cari kode ]]></b:skin> lalu tempelkan kode CSS yang baru saja kamu salin tepat di atas kode tersebut.

Kalian bisa mengubah warna border (garis) pada boks, dengan mengubah kode berikut:
     border: 1px solid #4169E1;
     border-left:15px solid #4169E1;
Untuk mengubah warna background dan teks
     background:#eee;
     color: black;
Untuk yang lainnya bisa kalian kreasikan sendiri dan ubah sesuai selera kalian.

Selanjutnya kalian salin JavaScript berikut ini lalu tempel tepat di atas kode </body> kemudian simpan template

JavaScript

<script type='text/javascript'>var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); copyTextareaBtn.addEventListener('click', function(event) { var copyTextarea = document.querySelector('.js-copytextarea'); copyTextarea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } }); </script>

Kemudian kalian buat postingan baru tulis artikel dalam mode HTML dan tempelkan kode html di bawah ini pada postingan kalian.

<div align="center">
  <textarea class="js-copytextarea">
     Di tulisan kalian simpan
     </textarea></div>
  <div class="js-buttoncopy">
<button class="js-textareacopybtn">Copy All</button></div>

 Gambar : my screenshot 

Ingat untuk menyimpan skrip atau tulisan yang akan di tampilkan dalam kotak juga harus di tulis dalam mode html bukan pada mode compose.  Dan nanti hasilnya akhirnya akan seperti berikut ini :

Kalian masukan tulisan, HTML, CSS, PHP JavaScript atau kode apapun yang ingin di tampilkan pada kolom ini untuk dicopy "masih ditulis pada mode html"

Seperti yang sudah saya sebutkan di atas bahwa kalian dapat meng kreasikan sendiri bentuk dan warnanya sesuai dengan keinginan kalian.

Demikian artikel saya kali ini semoga artikel ini bermanfaat buat kalian. Jika ada yang belum jelas pada pembahasan di atas silahkan kalian tanyakan di kolom komentar. Terimakasih.