Connect with our Team to Get Latest Information ... Subscribe Channel Join Whatsapp

How to Add 3 Best Download Buttons in Blogger Post with Scripts

Upgrade your website with cool download buttons! Follow our simple step-by-step guide to add button links, countdown download boxes, and more.

How to Add 3 Best Downlaod Buttons in Blogger Post with Scripts

Table of Contents

Everyone wants to put a download button on their blogger post if they want to provide something to someone whether it is any code or any text.  Let's create a download button so that if someone clicks on this download button, he will get that result.  Today I will teach you how to make three types of buttons.

Hopefully, when you are reading this article and the step-by-step methods I have provided, if you follow all of them, you will have a great blog and SEO fully optimized blog with your buttons etc.  The download buttons can be added easily.

Types of Download Buttons

  • Button Link
  • Download Button Link
  • Countdown Download Button

1. Button Link

How to add a button link follow these steps carefully. In the post or page in which you want to add the button link, first open it and go to the place where you want to add this button.After that paste code given below

Button
.html
<a class='button' href='url_is_here'>Title_link</a>


Alternative Style

Button
.html
<a class='button ln' href='url_is_here'>Title_link</a>


Button Link with Icons

Download Demo
.html
<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

with <svg> icons

WhatsApp me! Buy now!
.html
<a class='button' href='url_is_here'>
<svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
<span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
<svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
<span>Buy now!</span>
</a>

Add style='fill:#fff; margin-right:12px;' or style='stroke:#fff; margin-right:12px;' attribute to give SVG icon a white color.

Two button in single line:

.html
<div class='btnF'>
<a class='button ln' href='url_is_here'>Demo</a>
<a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
</div>

To provide downloaded file information to users.

file_name.zip 200kb
.html
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT' data-text='zip'></span>
<div class='fN'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fS'>200kb</span>
</div>

<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

With background image instead of text

about_me.png 10kb

In this if you want to change icon image then replace icon URL with Highlighted first line as well as you can change title and size of download and in last you can change icons in aria-label.If you want to provide download link then paste in url_is_here.

.html
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
<div class='fN'>
<!--[ File name ]-->
<span>about_me.png</span>
<span class='fS'>10kb</span>
</div>

<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

3. Countdown Download Box

This feature will show a countdown before the user downloads any file.

This feature requires direct download link of cloud files. You can use Google Drive to get direct download link of a file.

With Image:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp
Please wait...

Without Image

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

Read This Instruction Before Using Below Code

  • In the first line of code, you can also change the ID whatever you want.
  • In the second highlighted part, you can see that in the (image_url_here), in this code you will paste the URL of your image or icon here.
  • In Class=’dldIn’  you can change its ID, its name, its category, its size, its resolution or its extension.
  • And in the last one, which is the download button, where you see the hash ‘#’, you have to replace it with the URL of your drive share link by using this Direct Download Link Generator Tool After the #, you will see 10 written, if you want to increase or decrease download time then simply change the time in seconds. Next don't touch the false section and if you change the id at the start then you have to change the id at the last otherwise no need to change the id at the start and end.

Writing format

<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='dldSl'>
<div class='dldMe'></div>
</div>
</div>

About the Author

I'm Abdul Majeed Founder & CEO of Ai Tech 97. Expert Content Writing, Social Media Marketing, AI Tools Provider, and Blogger Expert. Have 2 Years of Experience in these fields.

تعليقان (2)

  1. i wanted to add count down download button on center on my post how.. please repley me..?
  2. Download icon logo URL kaise banaun
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
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.
Site is Blocked
Sorry! This site is not available in your country.