our old bloggerb store theme version. our old look

Google Drive Direct Link Generator in blogger

The Google Drive Direct Link Generator is a simple tool that converts Google Drive file URLs into direct download links. This can be particularly....
Google Drive Direct Link Generator in blogger
Google Drive Direct Link Generator in blogger


Google Drive Direct Link Generator

The Google Drive Direct Link Generator is a simple tool that converts Google Drive file URLs into direct download links. This can be particularly useful for sharing files more efficiently, bypassing the Google Drive interface and allowing for direct downloads. Below is the complete guide on how to create and use this tool, including the HTML structure, CSS for styling, and JavaScript for functionality.

HTML Structure

The HTML structure consists of three main parts: an input field to paste the Google Drive URL, a button to generate the direct link, and another section to display the generated direct link with options to copy or clear it.


<div class="BS-gd-gnrt">
    <input id="BS-inp-url" placeholder="https://drive.google.com/file/d/1kUXF..." type="text" />
</div>
<div style="text-align: center;">
    <button class="BS-gd-btn" id="BS-gd-btnid" type="submit">Create Direct Link</button>
</div>
<div class="BS-gd-hsl">
    <input id="BS-hsl-url" readonly="readonly" type="text" />
    <button class="BS-gd-btn BS-copy">Copy</button>
    <button class="BS-gd-btn BS-clear">Clear</button>
</div>
<!--[license code]-->
<div id="BSlsn-gdrv">i8i8SqibrmK1N64cML1zr65qMIPtimX=</div>

CSS Styling

The CSS provided below ensures that the input fields and buttons are styled appropriately for a clean and user-friendly interface. It includes styles for positioning, colors, padding, and other properties to enhance the visual appeal.


.BS-gd-gnrt input[type=text], .BS-gd-hsl input[type=text] {
    position: relative;
    width: 100%;
    font-size: 12px;
    color: var(--themeC);
    background: transparent;
    margin-top: 5px;
    padding: 20px;
    padding-left: 80px;
    border-radius: 5px;
    border: 1px solid var(--sideBd-color);
    outline: 0;
}
.BS-gd-gnrt:before, .BS-gd-hsl:before {
    content: 'Link';
    background: #f89000;
    position: relative;
    color: #fff;
    padding: 17px;
    z-index: 2;
    border-radius: 5px 0 0 5px;
    top: 46px;
}
.BS-gd-hsl:before { content: 'Result'; }
button.BS-gd-btn {
    display: inline-block;
    align-items: center;
    justify-content: center;
    padding: 15px;
    outline: 0;
    border: 0;
    border-radius: 20px;
    line-height: 1em;
    color: #fefefe;
    background-color: #f89000;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 25px;
}
button.BS-copy, button.BS-clear {
    border-radius: 5px;
    box-shadow: none;
    margin-right: 10px;
    padding: 15px 25px;
}
#BSlsn-gdrv { display: none; }

JavaScript Functionality

The JavaScript code below adds functionality to the HTML elements. It includes event listeners for the buttons to handle generating the direct link, copying the link to the clipboard, and clearing the input fields.


document.getElementById('BS-gd-btnid').addEventListener('click', generateLink);
document.querySelector('.BS-copy').addEventListener('click', copyLink);
document.querySelector('.BS-clear').addEventListener('click', clearLink);

var noUrlMessage = "You have not entered any URL!";
var invalidUrlMessage = "You must enter a valid Google Drive URL!";

function generateLink() {
    var input = document.getElementById('BS-inp-url').value;
    if (!input) {
        alert(noUrlMessage);
        return;
    }
    if (!input.includes('drive.google.com')) {
        alert(invalidUrlMessage);
        return;
    }
    
    var fileId = input.split('/')[5];
    var result = "https://drive.google.com/uc?export=download&id=" + fileId;
    
    document.getElementById('BS-hsl-url').value = result;
}

function copyLink() {
    var resultField = document.getElementById('BS-hsl-url');
    resultField.select();
    document.execCommand('copy');
}

function clearLink() {
    document.getElementById('BS-inp-url').value = '';
    document.getElementById('BS-hsl-url').value = '';
}

Demo

Click the button below to see the live demo of the Google Drive Direct Link Generator.

Recently Uploaded

Loading...