Kod Penceresi Oluşturmak

Kod veya Metin Kutusu Oluşturma Kodu

Yazı içerisinde ayrı bir pencerede kod yada yazı paylaşmak için HTML <textarea> Metin kutusu oluşturma etiketinden faydalanabiliriz. Bu çok basit ve sorunsuz bir şekilde kod penceresi oluşturup içeriği burada yayınlamamıza olanak verir.




Temel Kod :

<textarea class="input" style="width: 500px; height: 200px;">KOD YADA YAZI BURAYA EKLENECEK</textarea>




Kod Penceresi ve Kopyalama Butonu Kodu

Şimdi HTML de textarea tag'ı kullanarak yaptığımız pencereye bir kopyalama butonu ekleyelim. Böylece bir düğmeye basılarak kolayca kod kutusunun içerisi tek tıkla kopyalanmış yani seçilip ctrl+c yapılmış olsun.


<br />
<br />
<div>
<textarea class="js-copytextarea" style="height: 200px; width: 100%;">KOD YADA YAZI BURAYA EKLENECEK</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 />


height: 200px;  : Kod kutusunun yüksekliği.

width: 100%  : Kod kutusunun genişliği.

KOD YADA YAZI BURAYA EKLENECEK : Kısmına istediğiniz yazıyı yada kodu ekleyin.

KUTUYU KOPYALA : Buton üstündeki yazı.





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
Editörünü kullanabilirsiniz.


3 yorum:

  1. Gercekten isime yariyacak bir kod.izin verirseniz alinti yapacam:)

    YanıtlaSil
    Yanıtlar
    1. https://www.webkenti.net/p/webseyyah-dan-alnt-yapma-kosullar.html

      Sil
  2. http://formatmysourcecode.blogspot.com

    YanıtlaSil