Kopyala Butonlu Kod Penceresi Kodu

Blogger Kopyalama Butonlu Kod Kutusu (CodeBox) Eklemek

Yazı içerisinde kod paylaşan sitelerin çok sık kullandığı kod pencereleri bazı durumlarda sayfa yapısını bozuyor, bazı durumlarda da içeriğin kopyalanmasını zorlaştırıyor. Bunun için esnek yapıda kolayca kullanılabilir ve kod kutusunun içerisindeki kodları bir buton tıklaması ile kolayca kopyalama imkanı veren aşağıdaki kod bir çok koderin işine yaracaktır.

<br />
<br />
<div>
<textarea class="js-copytextarea" style="height: 200px; width: 100%;">YAZI</textarea>
<br />
<button class="js-textareacopybtn">KUTUYU KOPYALA</button>
<br />
<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>
</div>
<br />
<br />

HTML / JAVASCRİPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod editörünü kullanabilirsiniz.