Buy Plus UI v2.6! Demo Buy Now!

How to Create Download Button with File Information

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello viewers how are you. I hope you are doing well. And welcome to my blog Tech Aadi. With best regards let's start the article.

Today we will see How to Create Download Button with File Information for your blogger blog.

How to Create Download Button with File Information

Before starting please backup your blog template for any kind of errror and easy restoration process.

Creating Download Button with File Information

It's a very easy process you have to only add the css code in your template after that you can the HTML code for creating the downloading button.

So please follow the below given steps carefully.

Step 1:- Open your Blogger dashboard.

Step 2:- Go to Theme section.

Step 3:- Click on Edit Html section.

Step 4:- Now search for </style> tag. And copy the below given CSS code and paste it just after the </style> tag.

Demo 100GB
<style type='text/css'>
	.techaadi-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.techaadi-icon.techaadi-download{background-image:url("data:image/svg+xml,<svg xmlns='' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.techaadi-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.techaadi-downloadInfo a,.techaadi-downloadInfo .techaadi-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.techaadi-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.techaadi-downloadInfo a:after{content:attr(aria-label)}.techaadi-downloadInfo .techaadi-fileType:before{content:attr(data-text)}.techaadi-downloadInfo .techaadi-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.techaadi-downloadInfo .techaadi-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.techaadi-downloadInfo .techaadi-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .techaadi-downloadInfo{background-color:#2d2d30;border:0}.darkMode .techaadi-downloadInfo .techaadi-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.techaadi-downloadInfo{padding:12px}.techaadi-downloadInfo a{width:50px;height:50px;border-radius:10px}.techaadi-downloadInfo a:after{display:none}.techaadi-downloadInfo a .techaadi-icon{margin:0}}

Step 5:- Now don't forget to save the theme.

Step 6:- Using HTML code for creating the downloading button. Use the below given code to create the button where you want to show.

<div class='techaadi-downloadInfo'>
	<span class='techaadi-fileType' data-text='zip'></span>
	<div class='techaadi-fileName'>
		<span class='techaadi-fileSize'>100GB</span>
	<a aria-label='Download' href='#link'><i class='techaadi-icon techaadi-download'></i></a>

Now after following the above steps I hope you have successfully created the Download Button with File Information. If you got any error kindly contact us.


I hope you like this post How to Create Download Button with File Information. If you have any query please do feel free to comment below. Do follow our blogs for getting regular this type of articles.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

Post a Comment

Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.