Menambahkan fitur Download dengan Countdown Timer untuk Blogger V1

 

Halo Semuanya! Selamat datang kembali di CUANGACOR.NET, Hari ini pada kesempatan kali ini tutorial kita adalah Bagaimana cara menambahkan Countdown Timer 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 menampilkan 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 rasio pentalan dan meningkatkan pendapatan, dll.

Apa saja kelebihannya?

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.

Mari kita mulai sekarang!

Bagaimana 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 ]]></b:skin> dan rekatkan Kode CSS 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> . Jika Anda tidak menemukannya, mungkin sudah diurai yaitu &lt;/body&gt;.

     <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 save.

Langkah 8 : Selesai! Tambahkan Kode HTML berikut di Postingan Blog Anda melalui Tampilan HTML untuk menambahkan Countdown Download Box.

 <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 menambahkan di Tema XML.

 

 <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> 

Penutup 

Pada artikel kali ini saya telah membuat tutorial Cara Menambahkan Penghitung Waktu Mundur Konten di Blogger. yang dapat Anda gunakan di situs web Anda untuk mengurangi rasio Pentalan dan meningkatkan pendapatan, dll. Pengguna harus menunggu kode atau tautan unduhan hingga penghitung waktu selesai, jadi sebaiknya Anda mengurangi rasio Pentalan situs web Anda.