How to Create a File Save Tool in Blogger
Incorporating a file save tool in your Blogger website can be an invaluable addition, making it easier for your visitors to download files. In this blog post, we will provide a step-by-step guide on how to set up a file save tool on your Blogger site. Although Blogger is primarily focused on textual content, you can improve your website’s functionality by adding a file save tool.
 |
Copyright: Tech4era.com |
This Tool will help you create a file download tool for your Blogger site, allowing visitors to easily download resources like PDFs, eBooks, and templates.
Steps to Create a File Save Tool in Blogger
Step 1: Access the Blogger Dashboard.
Step 2: To create a new page, select the option to add a new page.
Step 3: Select your Created Page in HTML View Mode.
Step 4: After Selecting HTML View Mode Just Copy the Below Code and Paste.
<style>
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
select,
input[type="text"],
textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
}
select {
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px 20px;
font-size: 16px;
background-color: #428bca;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #357ABD;
}
#message {
text-align: center;
color: #009900;
font-weight: bold;
margin-top: 10px;
}
#bomLabel {
display: none;
margin-top: 10px;
}
#wrapInPre {
margin-top: 10px;
}
#wordWrap {
margin-top: 10px;
}
#syntaxHighlighting {
margin-top: 10px;
}
</style>
<div class="container">
<h2>Enhanced Text File Saver</h2>
<label for="fileName">File Name:</label><br>
<input type="text" id="fileName" placeholder="Enter file name"><br>
<label for="fileType">File Type:</label><br>
<select id="fileType">
<option value="txt">Text (.txt)</option>
<option value="json">JSON (.json)</option>
<option value="html">HTML (.html)</option>
<option value="csv">CSV (.csv)</option>
<option value="xml">XML (.xml)</option>
<option value="markdown">Markdown (.md)</option>
<option value="js">JavaScript (.js)</option>
<option value="css">CSS (.css)</option>
<option value="php">PHP (.php)</option>
<option value="python">Python (.py)</option>
<option value="java">Java (.java)</option>
</select><br>
<label for="fileExtension">Custom File Extension:</label><br>
<input type="text" id="fileExtension" placeholder="e.g., txt"><br>
<label for="text">Enter Text:</label><br>
<textarea id="text" rows="10" cols="40"></textarea><br>
<label for="includeBOM">Include Byte Order Mark (BOM):</label>
<input type="checkbox" id="includeBOM"><br>
<label for="characterEncoding">Character Encoding:</label><br>
<select id="characterEncoding">
<option value="utf-8">UTF-8</option>
<option value="utf-16">UTF-16</option>
<option value="iso-8859-1">ISO 8859-1</option>
</select><br>
<label for="lineEnding">Line Ending Format:</label><br>
<select id="lineEnding">
<option value="lf">LF (Unix)</option>
<option value="cr">CR (Mac)</option>
<option value="crlf">CRLF (Windows)</option>
</select><br>
<label for="wrapInPre">Wrap Text in HTML <pre> Tags:</label>
<input type="checkbox" id="wrapInPre"><br>
<label for="wordWrap">Word Wrap:</label>
<input type="checkbox" id="wordWrap"><br>
<label for="syntaxHighlighting">Syntax Highlighting:</label>
<input type="checkbox" id="syntaxHighlighting"><br>
<button id="saveButton">Save Text as File</button>
<button id="clearButton">Clear</button>
<p id="message"></p>
<label id="bomLabel">A Byte Order Mark (BOM) will be included in the file for Unicode (UTF-8 with BOM)
formats.</label>
</div>
<script>
document.getElementById("fileType").addEventListener("change", function () {
const fileType = document.getElementById("fileType").value;
const bomLabel = document.getElementById("bomLabel");
if (fileType === "txt" || fileType === "json" || fileType === "html") {
bomLabel.style.display = "block";
} else {
bomLabel.style.display = "none";
}
});
document.getElementById("saveButton").addEventListener("click", function () {
const textToSave = document.getElementById("text").value;
const fileName = document.getElementById("fileName").value;
const fileType = document.getElementById("fileType").value;
const fileExtension = document.getElementById("fileExtension").value;
const includeBOM = document.getElementById("includeBOM").checked;
const characterEncoding = document.getElementById("characterEncoding").value;
const lineEnding = document.getElementById("lineEnding").value;
const wrapInPre = document.getElementById("wrapInPre").checked;
const wordWrap = document.getElementById("wordWrap").checked;
const syntaxHighlighting = document.getElementById("syntaxHighlighting").checked;
if (!textToSave || !fileName) {
document.getElementById("message").textContent = "Please enter text and a file name.";
return;
}
const fileExtensionWithDot = fileExtension ? `.${fileExtension}` : "";
const blobType = includeBOM && (fileType === "txt" || fileType === "json" || fileType === "html")
? `text/${fileType};charset=${characterEncoding}`
: `text/${fileType};charset=${characterEncoding}`;
const lineEndingCharacters = {
lf: "n",
cr: "r",
crlf: "rn"
};
// Normalize line endings
const normalizedText = textToSave.replace(/rn|r|n/g, lineEndingCharacters[lineEnding]);
// Create the text content for HTML or plaintext
let textContent = normalizedText;
if (wrapInPre) {
textContent = wordWrap ? `<pre>${textContent}</pre>` : `<pre style="white-space: nowrap;">${textContent}</pre>`;
}
// Optionally add syntax highlighting
if (syntaxHighlighting && (fileType === "js" || fileType === "css" || fileType === "html")) {
textContent = `<code class="language-${fileType}">${textContent}</code>`;
}
// Create a blob from the text
const blob = new Blob([textContent], { type: blobType });
// Create an anchor element for downloading
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
// Set the URL and filename for the blob
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = `${fileName}${fileExtensionWithDot}`;
// Trigger a click event to download the file
a.click();
// Clean up
window.URL.revokeObjectURL(url);
document.getElementById("message").textContent = "File saved successfully.";
});
document.getElementById("clearButton").addEventListener("click", function () {
document.getElementById("text").value = "";
document.getElementById("message").textContent = "";
});
</script>Step 5: All are Done.
Conclusion
Making downloadable files available to your readers can be a valuable addition to your Blogger site, enabling them to access and save files that you want to share. By following these simple steps, you can establish a user-friendly system for hosting and sharing downloadable files on your Blogger site, enriching the overall user experience.
