Download Button
Step 1: First of all 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.
<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>
<style>
.download-popup{position:relative;}#downloadBtn,#freeDownloadBtn{background-color:#5ac1ff;}.download-popup{text-align:center;}[class~=popup]{background-color:#1c1c1c;}#downloadBtn,#freeDownloadBtn,[class~=popup]{color:white;}#freeDownloadBtn{padding-left:.3125in;}[class~=popup]{padding-left:.208333333in;}#freeDownloadBtn{padding-bottom:.15625in;}#freeDownloadBtn{padding-right:.3125in;}#freeDownloadBtn svg{fill:white;}#freeDownloadBtn{padding-top:.15625in;}[class~=popup] label input{margin-right:.15625in;}.popup label{display:flex;}#freeDownloadBtn{border-left-width:medium;}#freeDownloadBtn{border-bottom-width:medium;}#freeDownloadBtn svg{width:.25in;}#freeDownloadBtn{border-right-width:medium;}#freeDownloadBtn{border-top-width:medium;}#freeDownloadBtn{border-left-style:none;}#freeDownloadBtn{border-bottom-style:none;}[class~=popup]{padding-bottom:.208333333in;}#freeDownloadBtn{border-right-style:none;}[class~=popup]{padding-right:.208333333in;}#freeDownloadBtn{border-top-style:none;}#freeDownloadBtn{border-left-color:currentColor;}[class~=popup]{padding-top:.208333333in;}[class~=popup]{border-radius:.9375pc;}#freeDownloadBtn{border-bottom-color:currentColor;}#freeDownloadBtn{border-right-color:currentColor;}#freeDownloadBtn{border-top-color:currentColor;}#freeDownloadBtn{border-image:none;}[class~=popup]{position:absolute;}#freeDownloadBtn{border-radius:.104166667in;}[class~=popup]{top:3.75pc;}[class~=popup]{left:50%;}#freeDownloadBtn{font-size:18px;}#downloadBtn,#freeDownloadBtn{font-weight:bold;}#freeDownloadBtn{display:inline-flex;}.popup label,#freeDownloadBtn{align-items:center;}#freeDownloadBtn{justify-content:center;}#freeDownloadBtn,#downloadBtn{cursor:pointer;}[class~=popup]{transform:translateX(-50%);}[class~=popup]{width:320px;}#previewBtn,#downloadBtn{padding-left:1.5625pc;}#downloadBtn,#previewBtn{padding-bottom:.75pc;}#downloadBtn,#previewBtn{padding-right:1.5625pc;}#previewBtn,#downloadBtn{padding-top:.75pc;}#downloadBtn{border-left-width:medium;}[class~=popup]{box-shadow:0 3pt 15pt rgba(0,0,0,.5);}#downloadBtn{border-bottom-width:medium;}[class~=popup]{text-align:left;}#freeDownloadBtn svg{height:24px;}#freeDownloadBtn svg{margin-right:.625pc;}#downloadBtn{border-right-width:medium;}[class~=popup] label input{width:13.5pt;}[class~=popup]{z-index:10;}#downloadBtn{border-top-width:medium;}#downloadBtn{border-left-style:none;}#downloadBtn{border-bottom-style:none;}[class~=popup] label input{height:13.5pt;}#downloadBtn{border-right-style:none;}[class~=hidden]{display:none;}#downloadBtn{border-top-style:none;}#downloadBtn{border-left-color:currentColor;}#downloadBtn{border-bottom-color:currentColor;}#downloadBtn{border-right-color:currentColor;}#downloadBtn{border-top-color:currentColor;}#downloadBtn{border-image:none;}#downloadBtn,#previewBtn{border-radius:.083333333in;}#downloadBtn,#previewBtn,.popup label{font-size:1pc;}#downloadBtn{margin-top:11.25pt;}#downloadBtn,#previewBtn{width:100%;}#previewBtn{background-color:#e0e0e0;}#previewBtn{color:black;}#previewBtn{border-left-width:medium;}#previewBtn{border-bottom-width:medium;}#previewBtn{border-right-width:medium;}#previewBtn{border-top-width:medium;}#previewBtn{border-left-style:none;}#previewBtn{border-bottom-style:none;}#previewBtn{border-right-style:none;}#previewBtn{border-top-style:none;}#previewBtn{border-left-color:currentColor;}#previewBtn{border-bottom-color:currentColor;}#previewBtn{border-right-color:currentColor;}#previewBtn{border-top-color:currentColor;}#previewBtn{border-image:none;}#previewBtn{font-weight:bold;}#previewBtn{cursor:pointer;}#previewBtn{margin-top:10px;}.popup label{padding-left:0;}.popup label{padding-bottom:7.5pt;}.popup label{padding-right:0;}.popup label{padding-top:7.5pt;}
</style>