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.

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.

Go to Link