Hello friends, today I am going to tell you how we can install custom material box. In today's post on blogger's website, I will tell you. Friends, many people work very hard to make their blog beautiful and attractive, so that our readers who come to our website, they like to read and like it while reading, friends, the main reason for this is that this is your blog and Also attracts. Why We Use Custom Material Design Boxes Friends, due to the very large article, we all use color boxes, because friends, our readers who come by using this, do not feel bored in it, friends, they feel bored because friends, we all from top to bottom He writes Without any notes and paragraphs, friends, from this post you will be able to learn how to apply color boxes, which will make both your readers and your blog interesting. Benefits of Custom Material Design Boxes Friends, we can make our blog more attractive with custom material design box. And friends, which makes it easier for your visito
So friends, today again welcome all of you to our new and interesting blog, today friends, I will tell you in this post that how you all can add heart effect to your blogger. Friends, this heart effect will show on your website only, meaning it will be visible when you click or touch somewhere on your website. Friends, this effect has been created with the help of HTML, CSS and JavaScript, friends, if you put this in someone's website, you will see it, and when you click on their website, you will see Love Effect, Mandala Effect there. Who will get Friends, I have told you the tutorial below in the article of this post, all of you can easily put it on your blogger's website by reading this post, just friends, you have to follow all the steps correctly. How can we add Heart Effect in Blogger? Step 1:-. Friends, first of all you have to open the blogger website and you have to come to its people page. Step 2: - Friends, now you have to login to your blogger's website. from
How to Create Gradient Box with Countdown Timer Box in Blogger
Please wait 30 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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.
Table of Contents
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
This Gradient Box Countdown Timer is 100% responsive design.
This design is mobile friendly.
Its script codes which are there take up a lot of space in your website.
It is very comfortable for the user.
Adding this increases the chances of your ads click.
Because of this, the CTR of your website increases.
We can customize it according to our needs.
With this we can increase the pageviews of our website.
This also increases our earning..
Non-Uses
This will increases the loading time of your website.
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
File Name.zip200kb
https://www.youtube.com/@TechShreyansh/
file_name.zip200kb
https://www.youtube.com/@TechShreyansh
4k Wallpaper.pngMusic8.05MB2080×1080.jpg
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.
First you have to log in to your blogger dashboard.
Now you have to come to your theme section and click on edit HTML option.
Now you have to copy the javascript from below.
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
Now you have to search for </head> tag in your blogger templates and paste the css code </head> just above the tag.
Now you have to check your post and page by opening it, Bingo!! you have done it.
Even Other Ways
You have to publish the entire script by adding it to a single post and page.
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.
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 Programming Videos. Also I'm A Professional Web Developer Or Designer. I Enjoy Pl…
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.
