How to Add Download Button Like PicStock Blogger Theme

 Hello! Welcome to Action CodeD. 

You are looking for Download Button Like PicStock Blogger Theme then this post is just for you.

Download Button Like PicStock Blogger Theme

Step 1: Login to your Blogger Dashboard 

Step 2: Create a New Post/Page.

Step 3: Below are the button code which can be used in post to create Buttons.

<link href='https://cdn.jsdelivr.net/gh/Aaryan-sah/Download-Button@main/Download-Button.css' rel='stylesheet'/>

<div class="download-popup">
    <button id="freeDownloadBtn">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
            <path d="M0 0h24v24H0V0z" fill="none"/>
            <path d="M5 20h14v-2H5v2zm7-18L5.33 8h5.67v6h2V8h5.67L12 2z" fill="white"/>
        </svg>
        Free Download
    </button>

    <div id="downloadOptions" class="popup hidden">
        <label>
            <input type="radio" name="downloadOption" value="Google Drive"> Google Drive (Files)
        </label><br>
        <label>
            <input type="radio" name="downloadOption" value="Mega"> Mega (Files)
        </label><br>
        <button id="downloadBtn">Download Now</button>
        <button id="previewBtn">Preview</button>
    </div>
</div>

<script>
    const freeDownloadBtn = document.getElementById('freeDownloadBtn');
    const downloadOptions = document.getElementById('downloadOptions');
    const downloadBtn = document.getElementById('downloadBtn');
    const previewBtn = document.getElementById('previewBtn');

    freeDownloadBtn.addEventListener('click', () => {
        downloadOptions.classList.toggle('hidden');
    });

    downloadBtn.addEventListener('click', () => {
        const selectedOption = document.querySelector('input[name="downloadOption"]:checked');
        if (selectedOption) {
            if (selectedOption.value === 'Google Drive') {
                window.location.href = 'https://drive.google.com/your-file-link';
            } else if (selectedOption.value === 'Mega') {
                window.location.href = 'https://mega.nz/your-file-link';
            }
        } else {
            alert('Please select a download option.');
        }
    });

    previewBtn.addEventListener('click', () => {
        // Separate link for the Preview button
        window.open('https://your-preview-link.com', '_blank');
    });
</script>

Replace Our Link.

Conclusion

I hope you have successfully added your Download Button. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Action Coded