Cara membuat tombol dengan countdown timer

Faronesia.com -Hallo blogger, kemarin kita sudah membahas tutorial tentang cara membuat countdown timer promo diblog nah sekarang kita akan membahas tutorial yang bersangkutan dengan countdown timer lagi yaitu cara membuat tombol dengan countdown timer. Apasih tombol/button countdown timer? Tombol/button dengan countdown timer adalah tombol yang dilengkapi waktu hitungan mundur. Jadi, tombol tersebut akan muncul jika waktu yang ditetapkan telah selesai atau habis. Biasanya tombol seperti ini terdapat pada blog-blog safelink dan blog-blog download.

Apakah sulit dalam penerapannya? Tidak juga, anda hanya menempelkan kode yang telah admin sediakan nanti. Di buatnya tutorial ini adalah untuk belajar yang katanya sulit menjadi mudah dengan syarat anda harus menyimak dan teliti.

Silahkan klik demo untuk melihat hasilnya

live demo

Sebelum melakukan praktek ada baiknya anda harus membackup template anda, tujuannya adalah jika anda salah penempatan kode yang mengakibatkan kerusakan template masih mempunyai cadangannya. Sudah membackup? Mari simak dan praktekkan tutorialnya.

Cara membuat tombol dengan countdown timer

• Silahkan masuk ke dashboard blog anda
• Lalu masuk ke menu template dengan mengklik tema
• Selanjutnya klik edit html
• Cari kode ]]></b:skin> atau </style> (pilih salah satu)
• Letakkan kode css berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.ttan{display:inline-flex;border-radius:4px;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#22a1c4!important;margin:5px;padding:8px 20px;text-shadow:none;transition:all 1s}
.ttan:hover,.ttan:hover,.ttan.link:hover{background:#1D7891!important;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)}
.ttan:focus{background:#1D7891}
#dtan{display:none}

• lalu simpan template.

Untuk memunculkan tombol countdown timernya anda cukup menempelkan kode html dibawah ini pada postingan/halaman statis anda caranya:

• Masuk kepostingan/buat postingan baru lalu klik html (disamping compose) pastekan kode html dibawah ini

<div style="text-align: center;">
<a class="ttan" href="https://www.faronesia.com" id="dtan" target="_blank">​Download​</a>
</div>
<div id="daplong">
<script type="text/javascript">
//<![CDATA[
var seconds = 10;
setInterval(
    function() {
        if (seconds <= 1) {
            daplong.style.display = "none";
            dtan.style.display = "inline-block";
        } else {
            document.getElementById('credits').innerHTML = --seconds;
        }
    },
    1000
);
document.write('<b>Link download</b> will be appear <span id="credits">​60​</span> seconds');
//]]>
</script>
</div>

• Url https://www.faronesia.com ubah dengan link tujuan anda
• Tombol Download ubah sesuai keinginan anda
• Angka 10 adalah detik countdown, ubah sesuai keinginan anda
• Selesai lalu publish postingan tersebut
• Untuk mengujinya, anda cukup mengunjungi postingan blog anda tadi

Demikianlah mengenai Cara membuat tombol dengan countdown timer semoga bermanfaat untuk para sahabat blogger. jangan lupa share dan jika ada tanggapan serta masukkan silahkan masukkan pada kolom komentar yang telah tersedia.

Share this post