Buy Plus UI v2.5! Demo Buy Now!

How to Create Download Button with File Information

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

TechAadi.zip 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='http://www.w3.org/2000/svg' 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}}
</style>

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>TechAadi.zip</span>
		<span class='techaadi-fileSize'>100GB</span>
	</div>
	<a aria-label='Download' href='#link'><i class='techaadi-icon techaadi-download'></i></a>
</div>

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.

Conclusion

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.

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.