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.



Yorumlar

  1. tmm harika çalışıyor ama geliştirilmesi olabilirmi ben çoklu yapıyorum sadece en usttekini kopyalıyor bu çözmenin yolu varmı

    YanıtlaSil
    Yanıtlar
    1. Öncelikle soru net olmadığı için anladığım kadarı ile "bir alanda aynı kod tekrarlamasında çakışma yapıyor bunu nasıl düzeltebilirim? " Bu zaten normal, class lara farklı değerler atayarak sorun çözülür. class="js-copytextarea2" class="js-textareacopybtn2" vb.

      Sil
    2. WebKenti sorunum çözuldu teşekür ederim kaç gundur bu olayla urasıyorum

      Sil
    3. https://www.webkenti.net/2012/04/blogger-kod-penceresi-olusturmak.html

      Daha fazla özelleştirmeye bakabilirsiniz.

      Sil
  2. iyi günler hocam öncelikle kodu denedim başarlı şekilde oldu fakat blogum siyah tema olduğu için kopyalama butonu içindeki yazılar full beyaz yani kısacası kare içinde bulunan yazılar gözükmüyor ve bu konuda yardım edebilrimisiniz

    YanıtlaSil
    Yanıtlar
    1. İyi günler, style kısmına arkafon ekleyebilirsin
      style="background-color:#CD0000; height: 200px; width: 100%;">YAZI
      gibi #CD000 arkafon rengi.

      Sil

Yorum Gönder

🔺 YUKARI ÇIK 🔺