How to Create Gradient Box with Countdown Timer Box in Blogger

Rate this post

So friends, you are welcome in today’s new blog, so today we will learn “How can we make a Gradient box, that too with a countdown timer“. You can imagine that you can get any document file on your website. gives to do | So this Gradient box is very helpful for you. Some websites display a countdown before the Countdown starts. And redirects us to the final destination. If you want to use this countdown Gradient box, then you have to follow this article on how to setup Gradient box with countdown timer on your website.

LITTLE TALK

If you blog and use blogger platform to blog, then if you also have a google drive Link this will Also best for the blog, then you have to believe that you can earn a lot more by using Adsense. We have seen that many bloggers use Gradient box timer. Because through this, whatever user comes to our website, they stay on our website for some time. Through this, you can also control your bounce rate and there is no risk of getting disabled on Adsense.

New%20Project%205%20%5BF99AA23%5D

WHAT IS GRADIENT COUNTDOWN TIMER BOX AND HOW TO INSTALL IT IN BLOGGER

Those who do not know what is the Gradient Countdown box, that too with the countdown timer, it is a normal HTML button and when you click on it, the countdown timer box starts here, which you have given the time, and When the timer countdown ends, the user who is there gets his all the link. This Gradient box with countdown timer looks great in box design and responsive style. This Gradient box with countdown timer works great in all blogger templates and in all browsers, and you can also edit it, its style, colors, and Countdowns Timing which will be in its script.

USES AND NON-USES OF THE GRADIENT BOX IN BLOGGER’S WEBSITE

I will tell all of you, that you people should use Gradient Box timer box, because of this your average engagement time increases. And if you are wondering why your average engagement time should increase, then I will tell you why it is important for you, because if your average engagement time increases, then your ranking value in Google search also increases. There are many benefits for you too. 

This Gradient Box timer box has some uses and non-uses too, let’s see the script of this Gradient Box. 

Uses

 1: This Gradient Box Countdown Timer is 100% responsive design.  

2: This design is mobile friendly.   

3: Its script codes which are there take up a lot of space in your website.  

4: It is very comfortable for the user.  

5: Adding this increases the chances of your ads click.  

6: Because of this, the CTR of your website increases.  

7: We can customize it according to our needs.  

8: With this we can increase the pageviews of our website.  

9: This also increases our earning..

Non-Uses

1: This will increases the loading time of your website. 

2: This probably won’t work, especially in some low level websites.

Countdown Timer Box Demo for Blogger Website

Let’s see its demo before starting

HOW TO ADD COUNTDOWN BOX IN BLOGGER

Notice! Before doing any customizing or making any changes to your website’s templates, I strongly recommend that you take a backup of your theme’s old existing templates so that you can restore them. If something goes wrong.

See, I have already made everything, you do not need much knowledge for blogger website to make countdown Gradient box. in HTML, CSS and JS. You just have to implement the code properly in your blogger’s theme xml which you need.

  1. First you have to log in to your blogger dashboard.
  2. Now you have to come to your theme section and click on edit HTML option.
  3. Now you have to copy the javascript from below.
  4. Now you have to find the  </body>  tag and paste the JavaScript above the  </body>  tag
                  /* Countdown Script by Tech Shreyansh */
  <script type='text/javascript'>
//<![CDATA[
var timeLeft = 15;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.techshreyansh-targetlink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <techshreyansh-colour>'+timeLeft+'</techshreyansh-colour> second.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});

//]]></script>
        
  
                  /* Countdown Script by Tech Shreyansh */
  <script>
//<![CDATA[
// dwonload countdown timer by the Tech Shreyansh
var timeLeft = 30; //Set the time here
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.twtTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please Wait <span>'+timeLeft+'</span> Sec.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>
        
  

I have marked a yellow colored part for you, you have to change it according to your own like the example:30=30seconds

  1. Now you have to search for </head> tag in your blogger templates and paste the css code </head> just above the tag.
  2. Now you have to copy and paste the CSS code.
            <style>
/* Countdown Box by Tech Shreyansh*/
.downloadInfo{max-width:500px;background-color:#fefefe;box-shadow: 0 0 1px rgb(96 96 96 / 31%), 0 12px 24px -6px rgb(96 96 96 / 25%);border:1px solid #939393; border-radius:5px;padding:15px;margin-top: 10px;margin-bottom:20px; display:flex;align-items:center;line-height:1.8em;font-size:14px}

.downloadInfo a,.downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;font-weight: 500;justify-content:center;width:50px;height:50px;padding:10px;background:#fff;border-radius:10px}

  .downloadInfo a{box-shadow: 3px 8px 13px #1eff005c, -2px -4px 11px #f7ffff;

}

  .downloadInfo .fileType{box-shadow: inset 3px 5px 10px #c0c0c0, inset -3px -5px 10px #fff;}

.downloadInfo a{background: linear-gradient(310deg,#17ad37,#98ec2d);margin-bottom:-15px;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;cursor: pointer}

.downloadInfo .fileType:before{content:attr(data-text)}

.downloadInfo .fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}

.downloadInfo .fileName &gt; *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.downloadInfo .fileSize{line-height:20px;font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.downloadInfo a:hover {
box-shadow: 0px 11px 22px #ff7a004a;
background: linear-gradient(310deg,#f53939,#fbcf33);
}


nav.fileLink ul li a { color: RED; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.fileLink ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; } 

.techshreyansh-targetlink{display:none}
 
  /* Responsive layout */
@media screen and (max-width:600px){.downloadInfo{padding:12px}.downloadInfo a{width:50px;height:50px;border-radius:10px}.downloadInfo a:after{display:none}.downloadInfo a .icon{margin:0}}

techshreyansh-colour{background: linear-gradient(310deg,#7928ca,#ff0080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;font-size:1.5em;font-weight:bold}
</style>
  <style>
	.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background: linear-gradient(to right, #04a763, #1ec942);font-weight: 500;color:#fff!important; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}

.downloadInfo a:hover{background: linear-gradient(45deg, #8c00ff, #3533a5); box-shadow: 3px 8px 13px #c000ff5c, -2px -4px 11px #f7ffff;
}

.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName &gt; *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><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>&quot;)}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.twtTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkmode adjusts the class if it is different or removes this section */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} </style>
  
  
  1. Now you have to save the template by clicking on this icon.
  2. Now you have to come to your post area and paste the HTML code where you want to place the Countdown timer box.
  3. Now you have to copy the HTML code, and paste it in the section of the post area.
                 <!-- Countdown Timer Script - Provided by Tech Shreyansh-->
<div class='downloadInfo'>
<span class='fileType' data-text='Zip'></span>
<div class='fileName'>
<span class='textd'>File Name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label=''><svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-cloud-download-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z" fill="white"></path> </svg></a>
</div>
<div class='techshreyansh-targetlink'>https://www.youtube.com/@TechShreyansh/</div>
        
  
                 <div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='twtTargetLink'>https://www.youtube.com/@TechShreyansh</div>
        
  
                 <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'>YouTube</span>
        <span data-text='Category'>Trend</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("https://www.youtube.com/@TechShreyansh", "20", "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>
        
  
  1. Now you have to publish your post and page.
  2. Now you have to check your post and page by opening it, Bingo!! you have done it.

Even Other Ways

  1. You have to publish the entire script by adding it to a single post and page.
  2. This will definitely work in single posts

You have to replace What i Have Marked. i.e:
zip with File Type
File Name change with ur File Name
200Kb with Size of File
Youtube Link💡 with your URL.

CONCLUSION

I hope that you will find this article how to Add Gradient box countdown timer in blogger website, it will be very easy for you, for all of you. If you need more information, what else is there in this article. For more updates, you can join our Telegram channel. If you have any kind of difficulty, and if you face any kind of problem, in this tutorial, then you can ask us by commenting your question and by contacting us.

One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
alt_here

Hello! My name is Tech Shreyansh, and I'm a Youtuber and Content Creator from Azamgarh, India. I have a channel on YouTube called Tech Shreyansh where I upload Tech Video, Also I'm a Professional Web Developer or Designer. I enjoy playing with Codes and making Interesting Things.

Leave a comment