A download button is a graphical user interface element, typically found on websites or software applications, that allows a user to initiate the downloading of a file.
This button is often labeled with the word "Download" or an arrow pointing downward, and clicking on it typically triggers a file transfer from a remote server to the user's computer or device.
 |
| How to add download button for blogger that on click directly download the file - Custom download button to download any file with link |
About
Download buttons can be used to download various types of files, such as software applications, music files, videos, documents, and images. The type of file that is downloaded when the button is clicked depends on the file format that is associated with the button.
It is important to note that users should exercise caution when clicking on download buttons, especially on unfamiliar websites, as downloading files from untrusted sources can lead to malware infections or other security risks.
Create Download Button
To create or add a beautiful download button in blogger post follow the following steps:
- Go to blogger dashboard.
- Go to Theme.
- Click on drop down menu and select Edit HTML.
- Find CSS section or the codes that starts with /*
- Copy the following code
/* Heading Font */ @font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')} .Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px} .Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:Poppins, sans-serif} .Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px} .Blog .download-info .file-link .m-icon{width:15px;height:15px} .button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe !important;background-color:#005af0;border-radius:3px;font-size:13px;line-height:22px} .m-icon.download{background-image:url('data:image/svg+xml,')} .m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center} - Paste it above that /* code and save the theme.
- Now go to blogger post in which you want to add download button.
- Switch to HTML view and find a place where you want to add download button.
- Paste the following code.<div class='download-info'> <span class='file-icon'>File</span> <span class='file-text'>Download File</span> <a class='button file-link' href = "File Link"Download = "test_image" target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a> </div>
- Now go to google drive
- Upload any file in google drive.
- Share that file with permission Anyone with the link.
- Copy that file link from drive.
- Come back to blogger post.
- Now replace the File Link text with your file link.
- Now to make it direct downloadable, change the link with the following:
- Example Drive Link: https://drive.google.com/file/d/12oDstQima2Mw-qqnybp2NmvesGmXEsjQ/view?usp=sharing
- Changed Link: https://drive.google.com/uc?export=download&id=12oDstQima2Mw-qqnybp2NmvesGmXEsjQ
- Replace blue colored text in step-17 with gree coloured text in step-18 and remove red colored text in step-17 from the link.
- So your final file link will looks like link in step-18.
-
Now simply save the post and then publish it.