Cara Membuat dan Memasang Countdown Timer Di Blog

Cara Membuat dan Menambahkan Fitur 

Hitungan Waktu Mundur (Countdown) Pada Tombol Download di Blog - Hitungan waktu mundur atau biasa disebut dengan countdown timer pada tombol download ini merupakan salah satu trik ampuh untuk meningkatkan waktu tayangan pengunjung di blog dan penghasilan dari blog.

Dengan adanya fitur countdown pada setiap tombol yang berada di blog, tentunya nilai rata-rata baca para pengunjung akan meningkatkan karena mereka harus menunggu beberapa detik sebelum mereka keluar dari halaman blog kamu.

Tak ayal mengapa fitur countdown (hitungan waktu mundur) ini sering kali digunakan dan di manfaatkan untuk meningkatkan penghasilan Adsense mereka pada blog dengan niche download software atau aplikasi. Bagi kamu yang memiliki blog download (yang legal) dan ingin meningkatkan nilai rata-rata serta penghasilan dari Adsense, fitur ini cocok banget buat di coba.

Selain itu, fitur countdown timer (hitungan mundur) ini juga memiliki desain dan tampilan yang cukup elegan dan juga keren. Jadi saya rasa memasang fitur countdown timer ini pada tombol download di blog salah satu cara yang paling di rekomendasikan untuk meningkatkan penghasilan Adsense.

Untuk membuat hitungan waktu mundur ini pada tombol download di blog, kita membutuhkan beberapa kode dari CSS dan sedikit JavaScript. Jadi intinya, tutorial atau countdown timer ini kemungkinan besar akan mengurangi performa loading blog kamu. Berikut tutorial cara membuat dan memasang fitur countdown timer (hitungan waktu mundur) pada setiap tombol download di blog.

Saran saya, jika ingin membuat fitur countdown timer ini di blog, sebaiknya jangan pasang script-nya di template blog. Tapi cukup pasang langsung di postingan blog kamu saja. Hal ini bertujuan agar tidak mengurangi performa loading blog.

Cara Membuat dan Menambahkan Fitur Countdown Timer (Hitungan Mundur) Di Blog

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian tambahkan CSS dibawah ini diatas kode ]]></b:skin> atau </style>

   /* Download Countdown By Dzuhalah */ 
   #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#282828;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#count-download:hover{background:#000000;color:#fff;outline:none}.countdown{display:block;margin:0 auto;border-radius:4px}.countdown-box{background:rgb(33 150 243);color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-countdown{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:0.7em;box-shadow:0px 0px 5px -2px;}#count-download{float:right}#count-download{padding:10px 20px;border-radius:3px;background:#fff;color:#282828;float:right;text-align:center;font-size:14px;text-transform:capitalize}.countdown-info span{display:inline-block;line-height:38px;float:right;font-size:0.8em}.file-deskripsi{display:block;font-size:0.8em;}.file-deskripsi span{margin-right:3px}
   @media screen and (max-width:640px){.countdown{float:none;width:100%}}
   @media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#count-download{width:100%;margin-bottom:10px}.countdown-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

4. Lalu tambahkan juga JavaScript dibawah ini diatas tag penutup </body>

   <script type='text/javascript'>
   //<![CDATA[
   function generate(){var e,n=document.getElementById("count-download"),t=document.getElementById("btnx"),a=document.getElementById("count-download").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" detik...",t.style.display="none")},1e3)}
   //]]>
   </script>

5. Langkah terakhir klik simpan

Sampai di langkah ini CSS dan JavaScript dari fitur countdown timer tombol download ini sudah berhasil di pasang di blog. Selanjutnya untuk menggunakannya di postingan blog, kamu salin semua kode dibawah ini ke dalam kolom postingan pada tab HTML bukan Compose.

<div class="countdown">
<div class="countdown-box">
<div class="countdown-info">
<div class="file-info">
Blog Dzuhalah.apk
</div> 
<button onclick="generate()" id="btnx">download</button>
<a id="count-download" href="https://www.youtube.com/redirect?q=https%3A%2F%2Fwww.dzuhalah.my.id%2F" style="display:none">Re-download</a>
</div>
<div class="file-deskripsi">
<span class="uploader">Dzuhalah</span><br>
<span class="file-size">
 Ukuran File 1GB</span>
</div>
</div>
<div class="catatan-countdown">
Kalau file belum terunduh juga, coba deh di refresh lagi halamannya terus klik lagi tombol download tadi. Bisa kok!
</div>
</div>

Catatan :

Teks Blog Dzuhalah.apk ganti dengan nama file yang akan di unduh oleh pengunjung, teks berwana kuning adalah link keluar atau link tujuan file yang akan di unduh, Dzuhalah adalah nama uploader file dan bisa di ganti dengan nama kamu atau nama blog kamu, ukuran file 1GB ganti dengan ukuran file dan yang terakhir kamu ganti teks yang panjang berwarna merah dengan teks catatan footer terkait file tersebut.

See the Pen Cara Membuat Countdown Timer Di Blogger by Rifqi (@dzuhalah) on CodePen.

View On Codepen   

Nah, itu dia tutorial cara membuat tombol download dengan countdown timer di postingan blog. Semoga artikel ini bisa bermanfaat dan membantu oke.

Cindy NOTHING!!!

Share :