Cara Menambahkan Fitur Penghitung Mundur untuk Konten di Blogger

Halo semuanya! postingan saya pada kesempatan kali ini adalah tutorial Cara Menambahkan Fitur Penghitung Mundur untuk Konten di Blogger.

Jika Anda memberikan Kode atau file yang Dapat Diunduh di Situs Web Anda, Penghitung Waktu Mundur ini akan sangat membantu Anda untuk mengurangi tingkat Pentalan situs web Anda dan juga membantu Anda meningkatkan pendapatan. 

Beberapa situs web menunjukkan penghitung waktu mundur sebelum tautan File untuk diunduh atau Kode muncul sehingga pengunjung harus menunggu waktu tertentu setelah penghitung waktu selesai, pengunjung dapat menggunakan kode atau mengunduh file dari tautan.

Jadi Hari ini kita akan membuat Penghitung Waktu Mundur untuk Konten di Blogger. yang dapat Anda gunakan di situs web Anda untuk mengurangi tingkat Pentalan dan meningkatkan pendapatan, dll.

Kelebihan

1. Membantu mengurangi rasio Pentalan Anda .
2. Tingkatkan pendapatan AdSense Anda.
3. Pengguna harus menunggu kode atau tautan unduhan hingga penghitung waktu selesai.
4. Memuat animasi SVG.
5. Anda dapat menambahkan kode, tautan, konten, dll. untuk ditampilkan setelah penghitung waktu selesai.

INSTAL SEKARANG

Cara menambahkan Penghitung Waktu Mundur untuk Konten di Blogger

Langkah 1: Pertama-tama Login ke Dashboard Blogger Anda.

Langkah 2: Di Dasbor Blogger, klik Tema .

Langkah 3: Klik ikon panah ke bawah di sebelah tombol 'sesuaikan' .

Langkah 4: Klik Edit HTML , Anda akan diarahkan ke halaman pengeditan.

Langkah 5: Sekarang cari kode dan rekatkan Kode CSS]]></b:skin> berikut tepat di atasnya.

  Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center} 

Langkah 6: Sekarang tambahkan JavaScript berikut tepat di atas untuk </body>memberi tag. Jika Anda tidak menemukannya, mungkin sudah diuraikan yaitu </body>.

     <script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds 
var id,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
 /*]]>*/ </script> 

Langkah 7: Simpan perubahan dengan mengklik ikon ini

Langkah 8: Selesai! Tambahkan Kode HTML berikut di Posting Blog Anda melalui Tampilan HTML untuk menambahkan Kotak Unduhan Hitung Mundur.

 <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
  <div id="element-show" target="_blank">
   
    <!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/> 
    <a class="button" href="#" >Tutorial</a>
    
</div> 

Cara sederhana untuk menambahkan Penghitung Waktu Mundur untuk Konten 

Jika Anda akan menggunakan Penghitung Waktu Mundur ini hanya dalam 1-2 posting, Anda dapat dengan mudah menyalin kode di bawah ini dan langsung menambahkannya ke Tampilan HTML Posting Anda, daripada menambahkannya dalam XML Tema.

 
 <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
  <div id="element-show" target="_blank">
   
    <!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/> 
    <a class="button" href="" >Tutorial</a>

    
</div> 


    <script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds 
var id,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
 /*]]>*/ </script>


<style>
  Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center}
</style>