Membuat tombol Copy di blog

Membuat tombol Copy di blog

Membuat tombol copy all untuk mengcopy pada text area yang diinginkan, biasanya untuk mengcopy script yang ditampilkan di blog,  caranya sebagai berikut :

Copy kode dibawah ini :

<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> Pastekan di template (Edit html) diatas </body>

Untuk mengatur letak text area, copy dan paste kode berikut pada edit HTML diatas ]]></b:skin>. berikut kodenya :

.js-copytextarea{ border:1px solid blue;border-left:5px solid blue;background:#eee; display:block;margin:5px 0 10px 0;word-break: break-all; text-align:left;width:95%;height:150px;overflow:auto;}

Langkah terakhir adalah ketika membuat post, pada mode html, letakan kode berikut :

<button class="js-textareacopybtn">Copy All</button>
<textarea class="js-copytextarea">

  Artikelnya atau apapun yang akan di copy letakan disini... masih pada mode html

</textarea>

dimodifikasi dari Sumber : http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript.