How to add Google drive Direct Link Generator Tool on Blogger

Google Drive is one of the most popular cloud storage services used for sharing files. However, the default shareable links generated by Google Drive aren't direct download links, which can be inconvenient when you're sharing files with your audience. 

In this article, we'll guide you step-by-step on how to add a Google Drive Direct Link Generator Tool on your Blogger website. This tool allows users to input a shareable Google Drive link and instantly convert it into a direct download link.

Why Use a Google Drive Direct Link Generator Tool?

Before diving into the technical steps, let's understand the benefits of using a Google Drive Direct Link Generator tool:

Seamless Downloads: Users can download files directly without visiting Google Drive.

User-Friendly Experience: Simplifies the file-sharing process for visitors.

Improved Website Interaction: Encourages users to stay longer on your blog.

Ideal for Content Creators: Bloggers, educators, and professionals can easily share resources.

Step 1: Create a Blogger Account and New Post

Log in to your Blogger account.

Click on "Create New Post."

Add a suitable Title for your post, such as "Google Drive Direct Link Generator Tool."

Switch to HTML View from the editor.

Step 2: Add the HTML, CSS, and JavaScript Code

Copy and paste the following code into the Blogger HTML editor:

    

<style> 
   input[type=url]{position:relative;width:90%;line-height:1em;font-size:10px;color:#455065;background:#ebeff3;margin-top:10px;padding:15px;border-radius:10px;border:none;outline:0}.alpha-arp-googlegen{display:flex;justify-content:center;color:#000;flex-wrap:wrap;font-family:var(--fontBa);font-size:14px}.gdCont{width:100%;display:block;position:relative;background:#fff;border-radius:20px;box-shadow:0 10px 40px rgba(149,157,165,.2);padding:0 0 10px;text-align:center;margin:10px 0px 10px}.gdCont h1{display:inline-flex;align-items:center;font-size:14px;font-weight:700;font-family:var(--fontBa)}.gdCont h1 svg{margin-right:5px;height:22px;width:22px}.g-button{display:inline-flex;align-items:center;margin:12px 0;padding:10px 15px;border:0;border-radius:8px;line-height:20px;color:#fffdfc;background:#0f0;font-size:14px}#help-text{font-size:.7rem;margin:10px}
</style>
<div class="alpha-arp-googlegen">
   <div class="gdCont">
      <h1 id="Google-drive-direct-link-generator" style="margin: 0em 0px; padding-top: 10px;">
         <svg viewbox="0 0 512 512">
            <g>
               <path d="m165.9 334.3-4.3 85-78.9 59.9L0 333.4 172.6 32.8l80.8 55.5 2.7 89.9-.8.4z" data-original="#1ea362" fill="#1ea362"></path>
               <path d="M339.4 32.8 512 333.4l-93.1 47.1-73.7-46.6v-.5l-89.1-155.2-83.5-145.4z" data-original="#ffd837" fill="#ffd837"></path>
               <path d="m512 333.4-82.7 144.9-346.6.9 83.2-144.9 179.3-.4z" data-original="#4587f4" fill="#4587f4"></path>
               <path d="m82.7 479.2 145-145-61.8.1z" data-original="#3f73d9" fill="#3f73d9"></path>
            </g>
         </svg>
         Google Drive Direct Link Generator
      </h1>
      <input id="input" placeholder="Enter your shareable G-drive Link" type="url" />
      <button class="g-button" id="button">Create Link</button>
      <button class="g-button" onclick="resetForm()" type="button">Reset</button>
      <div class="output-title">Output link</div>
      <input disabled="" id="output" readonly="" type="url" />
      <div id="help-text"></div>
   </div>
   <span>Made by <a href="https://alphaarp.blogspot.com/2024/12/how-to-add-google-drive-direct-link-generator-tool-on-blogger.html">Alpha Arp</a></span>
</div>
<script>
   function setup() {
     const button = document.getElementById("button");
     const output = document.getElementById("output");
     
     button.addEventListener("click", go);
     output.addEventListener("click", copy);
   }
   
   function setStatus(message, isError = false) {
     const helpText = document.getElementById("help-text");
     helpText.innerText = message;
     helpText.style.color = isError ? "darkred" : "#227300";
   }
   
   function go() {
     const input = document.getElementById("input").value;
     const match = /\/d\/(.+?)(?:\/|#|\?|$)/.exec(input);
     const output = document.getElementById("output");
     
     if (!match) {
       output.value = "";
       setStatus("Error: Invalid URL", true);
       output.disabled = true;
       return;
     }
     
     const directLink = "https://drive.google.com/uc?export=download&id=" + match[1];
     output.disabled = false;
     output.value = directLink;
     setStatus("Success! Click the output link to copy it to your clipboard");
   }
   
   function copy() {
     if (!this.disabled) {
       this.select();
       document.execCommand("copy")
         ? setStatus("Link copied to clipboard!")
         : setStatus("Couldn't copy link to clipboard. Please copy it manually.", true);
     }
   }
   
   function resetForm() {
     document.getElementById("input").value = "";
     document.getElementById("output").value = "";
     setStatus("");
   }
   
   window.onload = setup;
</script>

Conclusion

Your Google Drive Direct Link Generator Tool is now live on Blogger. Share this tool with your audience to simplify file downloads. For better SEO, use relevant keywords and meta descriptions.

Happy Blogging!