Blogger Aracı JavaScript'te Metni Dosya Olarak Kaydetme

Blogger Web Siteniz için Dosya Kaydetme Er Aracı oluşturmak, HTML, CSS veya JS hakkında çok fazla bilgi gerektirmeyecektir çünkü onu zaten sizin için tasarladım. Yapmanız gereken aşağıdaki kodları HTML View üzerinden bir yazıya, sayfaya veya herhangi bir yere yapıştırmaktır.

1. Adım Öncelikle Blogger Kontrol Panelinize giriş yapın.

2. Adım Blogger Kontrol Panelinde Sayfalar veya Gönderi'ye tıklayın.

3.Adım Yeni bir sayfa oluşturun veya simgeye tıklayarak yayınlayın veya mevcut sayfaya tıklayın veya kodları buraya eklemek için yayınlayın.

4. Adım HTML görünümüne geçin.

5. Adım File Save Er Tool'u eklemek istediğiniz yere aşağıdaki kodları yapıştırın.

<style>
/* Code by: Navy Studio */ #clearBtn,#saveBtn,.box{background:#fff;font-size:14px}.file-options,.save-as{margin-left:0;margin-right:1%}.box{padding:16px 20px;box-shadow:0 5px 35px rgb(0 0 0/7%);border:0;border-radius:10px;margin-bottom:20px}#input,#text,.nvsn select{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.08);border-radius:5px}.nvsn select{height:52px;appearance:none}#input:focus,#text:focus,.nvsn select:focus{outline:0;border:1px dashed var(--linkC)}#textA textarea{height:80px;-webkit-transition:.25s ease-in-out;transition:.25s ease-in-out}#textA textarea:focus{height:150px}#clearBtn,#saveBtn{text-align:center;align-items:center;margin-top:5px;padding:12px 15px;outline:0;border:0;box-shadow:0 2px 25px 2px rgba(0,0,0,.05);line-height:20px;font-weight:700}.f{border-radius:5px 5px 0 0}.l{border-radius:0 0 5px 5px}.file-options{width:49%}.save-as{width:50%}.drK #clearBtn,.drK #input,.drK #saveBtn,.drK #text,.drK .box,.drK .nvsn select{background:var(--darkB);border:1px solid var(--darkBl)}.drK .nvsn select{color:#fff}.drK #input:focus,.drK #text:focus,.drK .nvsn select:focus{outline:0;border:1px dashed var(--darkU)}.option :where(input,.select-menu){margin-left:0;margin-right:1%;width:50%}
</style>

<div class="file-name">
  <div class="box" style="display: flex">
    <div class="option file-options">
      <label for="input">Enter file Name</label>
      <input id="input" type="text" required="" spellcheck="false" placeholder="Enter file name">
    </div>
    <div class="option save-as">
      <label for="select">Save as</label>
      <div class="nvsn">
        <select id="select">
          <option value="text/html">HTML File (.html)</option>
          <option value="text/css">CSS File (.css)</option>
          <option value="text/javascript">JS File (.js)</option>
          <option value="text/plain" selected="">Text File (.txt)</option>
          <option value="text/xml">XML File (.xml)</option>
          <option value="image/svg+xml">SVG File (.svg)</option>
          <option value="application/msword">Doc File (.doc)</option>
          <option value="application/vnd.ms-powerpoint">PPT File (.ppt)</option>
          <option value="text/python">Python File (.py)</option>
        </select>
      </div>
    </div>
  </div>

  <div class="box">
    <div id="textA">
      <label for="text">Enter Something</label>
      <textarea rows="3" style="resize: vertical" required="" spellcheck="false" id="text" placeholder="Enter something to save"></textarea>
    </div>
  
    <div id="saveBtn" class="f" type="button ln">Save As Text File</div>
    <div id="clearBtn" class="l" onclick="cleared();vibRate(50)" type="button ln">Clear</div>
  </div>
</div> 

<script>
  const textarea = document.querySelector("textarea");
  const fileNameInput = document.querySelector(".file-name input");
  const selectMenu = document.querySelector(".save-as select");
  const saveBtn = document.getElementById("saveBtn");
  const clearBtn = document.getElementById("clearBtn");

  selectMenu.addEventListener("change", () => {
    const selectedFormat = selectMenu.options[selectMenu.selectedIndex].text;
    saveBtn.innerText = `Save As ${selectedFormat.split(" ")[0]} File`;
  });

  saveBtn.addEventListener("click", () => {
    const blob = new Blob([textarea.value], { type: selectMenu.value });
    const fileUrl = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.download = fileNameInput.value + "Unknown";
    link.href = fileUrl;
    link.click();
  });

  function cleared() {
    // Function to reset the input and text fields
    document.getElementById("input").value = "";
    document.getElementById("text").value = "";
  }
</script>

Bütün işlemler bu kadar Demo sayfamızı kontrol edebilirsiniz.

DEMO SAYFASI

Go to Link

© Serkan Kod Editörü