Advanced timer script script for blogger website

Download timer script for blogger


 Welcome back guys.


So, in this post, I will guide you on how to set an advanced timer before the download button and advanced download button for Blogger. Before we move forward, let's talk about the purpose of the timer.

Purpose of timer

It will decrease your website bounce rate.

It will increase your ad impression.

It will increase your ad CTR rate.


We will follow up today,


  1. Advanced timer script

  2. Advanced download button script

Advanced timer script

This type of timer script will open the download page as a pop-up window, when visitors click the download button. You can see the image below.

Steps to create download page

STEP:#1

Go to the blogger dashboard, under the theme section and click edit html and search </head> and paste following css code just before it.


<style>
.modal {
        display: none;
        position: fixed;
        top: 0; 
        right: 0; 
        bottom: 0;
        left: 0;
        text-align: left;
        background: rgba(0,0,0, .9);
        transition: opacity .25s ease;
        z-index:999;
 }
 .ind-pop__bg{ 
         position: absolute; 
         top: 0; 
         right: 0; 
         bottom: 0;
         left: 0; 
        cursor: pointer;
 }
 .ind-pop { 
        display: none;
 }
 .ind-pop__inner { 
        transition: top .25s ease; 
        position: absolute;
        top: -20%;
        right: 0; 
        bottom: 0;
        left: 0;    
        width: 50%;
        margin: auto;
        overflow: auto; 
        background: #fff; 
        border-radius: 5px;
        padding: 1em 2em;
        height: 50%; 
} 
.ind-pop__close {
        position: absolute;
        right: 1em; 
        top: 1em; 
        width: 1.1em;
        height: 1.1em; 
        cursor: pointer;
 } 
.ind-pop__close:after, .ind-pop__close:before {
       content: &#39;&#39;;
       position: absolute;
       width: 2px; 
       height: 1.5em; 
       background: #333; 
       display: block;
       transform: rotate(45deg);
       left: 50%;
       margin: -3px 0 0 -1px; 
       top: 0; 
} 
.ind-pop__close:hover:after, .ind-pop__close:hover:before {
       background: #aaa;
 } 
.ind-pop__close:before { 
       transform: rotate(-45deg);
 } 
.adpop-top{
        height: 40px; 
        width: 100%; 
        border-bottom: 1px #E5E5E5 solid;
} 
.ad-ind{
       margin: 14px 0 4px; 
       min-height: 260px;
}
.adpop-content{
       height: 330px;
}
#ind-download{
       display: inline-block;
       height: 30px;
       line-height: 30px;
       width: 140px; 
       text-align: center; 
       background-color: #f3f2f2; 
       color: #000; 
       font-size: 15px;
       border-radius: 8px;
       text-transform: capitalize; 
       border: 1px solid #212121!important;
       margin-top: 1px;
}
.download-pop{
       line-height: 16px; 
       margin: 5px 0 5px;
       font-size: 14px;
       position: relative;
}
.btn-ind{
        display: block; 
        height: 50px; 
        color: #fff; 
        font-size: 24px;
        text-transform: uppercase;
        background: #f3a;
        text-align:center; 
        line-height: 50px;
        width: 200px; 
        margin: 150px auto; 
        transition: all 0.4s ease-in;
}
.adpop-top h2{
       margin:0
}

@media screen and (max-width: 768px) { .ind-pop__inner { 
        width: 90%; 
        box-sizing: border-box; 
} 
} 
</style>

Step:#2

Find </body> tag on theme and paste following script code just before it.


<script>
//<![CDATA[
const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-ind"); const closeModal = document.getElementsByClassName("ind-btnclose")[0]; for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function () { modal.style.display = "block"; }); } btn.onclick = function () { modal.style.display = "block"; }; closeModal.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } };
var downloadButton = document.getElementById("ind-download"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("btn-ind"); clickbtn.onclick = startDownload;
//]]>
</script>

STEP:#3

Create a new post or open your existing post, where you want to this download button. Paste the following html code.



<div class="btn-ind" id="btn-ind">Download</div>
<div class="modal" id='my-modal'>
  <div class="ind-pop__bg"></div>
  <div class="ind-pop__inner">
    <div class="adpop-top">
 <label class="ind-pop__close ind-btnclose"></label>
    <h2 style="margin: 0px;">Download Your file</h2>
    </div><div class="adpop-content">
    <div class="ad-ind">
<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="1235748942" data-full-width-responsive="true" style="display: block;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>
<div class="download-pop">
        <a class="button" href="#" id="ind-download">Download File</a>
  
    </div>
    </div>
     
  </div>
</div>

STEP:#4

Replace "#" into your file link. Then click publish.


Advanced download button script

This download button fully responsive to all web devices.


STEP:#1

Go to the blogger dashboard, under the theme section and click edit html and search </head> and paste following css code just before it.

<style>
.button-1{
       display: block;
       margin-right: 12px;
}
.Heading-ind{
       position:relative;
       text-align: center; 
       padding: 12px;
       border-bottom: 1px solid;
       margin-bottom: 24px;
}
.Heading-ind:before{
       position: absolute; 
       content: "\2665";
       display: inline-block;
       margin-left: -113px;
}
.button-list{
       display:flex;
       justify-content:space-around;
}
.buttonDownload { 
      display: inline-block; 
      position: relative; 
      padding: 10px 25px;
      background-color: #4CC713; 
      color: white; 
      font-family: sans-serif; 
      text-decoration: none; 
      font-size: 0.9em; 
      text-align: center; 
      text-indent: 15px; 
} 
.buttonDownload:hover {
      background-color: #333; 
      color: white; 
} 
.buttonDownload:before, .buttonDownload:after { 
     content: ' '; 
     display: block; 
     position: absolute; 
     left: 15px; 
     top: 52%; 
} 
.buttonDownload:before {
     width: 10px; 
     height: 2px; 
     border-style: solid;
     border-width: 0 2px 2px; 
}  
.buttonDownload:after { 
     width: 0; 
     height: 0; 
     margin-left: 3px; 
     margin-top: -7px; 
     border-style: solid; 
     border-width: 4px 4px 0 4px;
     border-color: transparent;
     border-top-color: inherit;
     animation: downloadArrow 2s linear infinite; 
    animation-play-state: paused;
 } 
.buttonDownload:hover:before {
      border-color: #4CC713;
 } 
.buttonDownload:hover:after {
      border-top-color: #4CC713;
      animation-play-state: running; 
} 
summary { 
      font-size: 1.25rem; 
      font-weight: 600;
      background-color: #fefefe; 
      color: #333; 
      isolation: isolate;
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc; 
      border-radius: 0.25rem;
      text-align: left; 
      cursor: pointer; 
      position: relative;
 } 
details > summary::after { 
      position: absolute; 
      content: "\25bc";
      right: 20px;
      font-size: 14px;
 } 
details[open] > summary::after {
      position: absolute;
      content: "\25b2"; 
      right: 20px;
      font-size: 14px; 
} 
details > summary::-webkit-details-marker {
     display: none; 
} 
details[open] summary ~ * { 
      animation: sweep .5s ease-in-out;
      animation: sweep .5s ease-in-out;
      isolation: isolate;
      border: 1px solid #ccc; 
      margin-bottom: 1rem;
      background-color: #fefefe; 
      padding: 1rem; 
}
@keyframes downloadArrow { 0% { margin-top: -7px; opacity: 1; } 0.001% { margin-top: -15px; opacity: 0; } 50% { opacity: 1; } 100% { margin-top: 0; opacity: 0; } }

@keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }

</style>

Step:#2

Create a new post or open your existing post, where you want to this download button. Paste the following html code


<div class='Heading-ind'><h3>Download Links</h3></div>

<details>
  <summary>480p - Watch/Download (181MB)</summary>
  <div class="$(function(ind-download)" style='text-align: center;'>
    <div class='button-list'><div class='button-1'>
      <a href="#" class="buttonDownload">Download</a></div><div class='button-2'><a href="#" class="buttonDownload">Download</a></div></div>
  </div>
</details>
<details>
  <summary>720p - Watch/Download (357MB)</summary>
  <div class="$(function(ind-download)" style='text-align: center;'>
    <a href="#" class="buttonDownload">Download</a>
  </div>
</details>
<details>
  <summary>1080p - Watch/Download (558MB)</summary>
  <div class="$(function(ind-download)" style='text-align: center;'>
    <a href="#" class="buttonDownload">Download</a>
  </div>
</details>

STEP:#4

Replace "#" into your file link. Then click publish.


Conclusion

Finally we successfully created an advanced timer before the download button and advanced download button for Blogger. If you are facing any problems please comment below. If you like this post please share your social media profiles.

Comments

Post a Comment

Popular posts from this blog

How do I start blogging in 2021-full guide for beginners

Image
 In this post, we will see how to create a blog  How to Start a Blog in 6 Easy Steps Step # 1: Select a perfect niche for your blog Step # 2: Choose a blogging platform Step # 3: Pick a domain name Step # 4: Starting a blog on WordPress and blogger Step # 5: Select a theme and design your blog Step # 6: submitting your site to Google, Bing, Yahoo, and so on.
Read more

Top five FeedBurner alternative for Blogger website

Image
  Google Feedburner announced RSS feeds email service will be removed after this July. What are they going to do? The FeedBurner are transitioning FeedBurner into a more stable, modern infrastructure. They will be turning down most non-core feed management features, including email subscriptions. What we can expect? All existing feeds will continue to serve uninterrupted, and you can continue to create new accounts and burn new feeds. Some management functionality will continue to be supported, such as the ability to change the URL, source feed, title, and podcast metadata of your feed. How to download your FeedBurner email subscriber data Click Analyse, and select Subscribers. Under View Subscriber Details, click CSV (next to "Export"). Top five FeedBurner alternative for Blogger website RapidFeeds Feedity  FeedPress Feedblitz RevResponse #1.RapidFeeds The Rapid feeds, RSS feeds, and display RSS feeds on your website with FREE and simple online RSS service. We can also Publ...
Read more

Html Codes for Jump link, Marquee Text, disable copy button, Animating headings, Floating Slide in Banner, Floating Youtube subscribe button for Blogger website

Image
  Welcome back guys. So, in this post, I will guide you on how to create the following things on the Blogger website.  Today we are going to see, Jump link Marquee Text  disable copy button Animating headings Floating Slide in Banner  Floating Youtube subscribe button #1. Jump link  Jump link is one kind of internal linking strategy . By using a jump link, users can skip unnecessary topics or they can jump to the final answers or any other steps as they want. The jump link strategy gave a better experience to the visitors. This will give easy navigation to the visitors. So let's see, How to create a jump link strategy in blogger? STEP:#1 Go to the blog post where you want to add it and switch to HTML mode. STEP:#2 Add span tag before on heading or paragraph(as you want). Like this <span id="step1"> </span> STEP:#3 Then copy the URL of that post and choose the text where you want to link it. Then click link icon and paste URL of that particular ...
Read more