Hello friends, welcome to the Jonak Axom blogging tutorial. Today you will learn how to add a Download Button in a Blogger blog post with pictures.

New Beautiful Responsive Download Button Code For Blogger

Nowadays, there are millions of websites and blog are over the internet including Android, PC, Apps, Coding, Videos, Music, News, Photos blogs or website, etc … And many websites and blogs have some downloadable data for users there, for example, when you download Pictures, use Pinterest, JioSaavn songs, Youtube videos, etc.

Jonakaxom is reader-supported. If you purchase through a link on my site, I may earn a commission. Disclosure Policy

If we have any downloaded files here and the user can just click the download button to download a file, now I am going to teach you to create a beautiful and responsive Download Button in the Blogger blog.

Blogspot Tutorial: How To Add A Download Button In Blogger Post  : Download Button For Blogger

Step 1: Go to the theme section of your blog | click on the HTML editing mode 

Blogger+download+button+Setting

Step2: Paste the CSS code just below the blog name details or you can paste the code under head section.

blogger+download+button+css+code

CSS Code For Blogger Download Button

 /* 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23161617" 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>')}
.m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}

Step3: Go to Blogger Post and select a post which you want to add a beautiful Download button then click the Edit button on the post.

Blogger+download+button+2

Step 4: Now Copy the HTML code given below and replace your URL with Red URL.

Blogger+download+button+html+code

Html code For Blogger Download Button

<div class='download-info'> <span class='file-icon'>Zip</span> <span class='file-text'>Assamese Book.zip</span> <a class='button file-link' href='//jonakaxom.in' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a> </div>

Step 5: Click to Publish button and open Blogger Blog.

Blogspot Tutorial: How To Add A Download Button In Blogger Post 2021 : Download Button For Blogger

Note:- Replace The RED URL With Your URL | Before Paste

This is the most latest and best blogger download button code which I have personally used in most of my blogs .if you have any question regarding to my blogging tutorial please comment below.

Join The Community

Join the completely free JonakAxom Telegram/Whatsapp Group and connect with an awesome community of rockstar individuals who are passionate about building fast, profitable WordPress sites to grow their businesses. Come say hi! 👋

Similar Posts

14 Comments

  1. This is very helpful and working thanks.

    Where can I get your website theme ?? I love your Template where can I get it ? What's the name of the template?

  2. Nice…मुझे आपका ब्लॉग टेम्प्लेट पसंद है कृपया क्या आप साझा कर सकते हैं?👀

Leave a Reply

Your email address will not be published. Required fields are marked *