Cara Membuat Tombol Download Berdasarkan Tugas

Cara Membuat Tombol Unduh Berdasarkan Tugas - Kali ini kita akan berbagi tutorial membuat tombol download di blog yang akan terbuka berdasakan intruksi tugas. Kamu bisa lihat demo di bawah postingan ini.

Cara kerja tombol unduh ini baru akan terbuka jika pengunjung sudah menyelesaikan intruksi yang di berikan, seperti menfollow fans page terlebih dahulu baru tombol download akan terbuka otomatis.

Dengan kata lain, tombol download akan terkunci terlebih dahulu sebelum pengunjung menyelesaikan tugas yang di berikan. Lalu bagaimana cara membuat tombol unduh tersebut?

Table of Contents

Langkah Membuat Tombol Download Berdasarkan Tugas

Langkah #1: Buka Dasbhoard Blogger kamu
Langkah #2: Masuk ke Tema > Edit HTML
Langkah #3: Tambahkan kode CSS di bawah ini di atas tag </style> atau tag ]]></b:skin>

.stepdownload{align-items:center;justify-content:center;margin:12px auto}
.stepdownload input{width:100%;margin:5px auto;}
input#step1{cursor:pointer;}
input#step2{background-color:#ddd; cursor:no-drop;}
input#step3{background-color:#ddd; cursor:no-drop;}
input#stepfinal{background-color:#ddd; cursor:no-drop}
#BoxDownload{text-align:center;margin:auto;width:310px;padding:2px;}

Langkah #4: Buat Tombol Unduh

1. Buat halaman atau posting untuk menampilkan tombol unduh
2. Beralih ke tab Tampilan HTML
3. Salin kode html ini dan paste di tempat kamu ingin tombol unduh muncul

<div class='stepdownload'>
<input id="step1" onclick="step1()" type="button" value="1. Like Fans Page!" />
<input disabled="" id="step2" onclick="step2()" type="button" value="2. Follow Instagram!" />
<input disabled="" id="step3" onclick="step3()" type="button" value="3. Subscribe Youtube!" />
<input disabled="" id="stepfinal" onclick="stepfinal()" type="button" value="Download File" />
<p id="textfinal" style="text-align:center;"></p>
</div>

Ganti text yang di tandai sesuai dengan kalimat atau instruksi yang kamu berikan.

Langkah #5: Selanjutnya tambahkan kode js ke dalam postingan yang sama yang dibuat pada langkah 4

<script>
$link1 ="Tautan_1";
$link2 ="Tautan_2";
$link3 ="Tautan_3";
$linkfile="Tautan_unduh";    
  function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}
  function step1()
    {    window.open($link1);
         sleep(4000);
        document.getElementById("step1").value="Like Fans Page!";
        document.getElementById("step1").onclick= "";
        document.getElementById("step2").style.backgroundColor = "#204ecf";
         document.getElementById("step2").style.cursor = "pointer";
         document.getElementById("step2").disabled= false;   
    }
    function step2()
    {    window.open($link2);
         sleep(4000);
        document.getElementById("step2").value="Follow Instagram!";
        document.getElementById("step2").onclick= "";
        document.getElementById("step3").style.backgroundColor = "#204ecf";
         document.getElementById("step3").style.cursor = "pointer";
         document.getElementById("step3").disabled= false;
    }
        function step3()
    {    window.open($link3);
         sleep(4000);
        document.getElementById("step3").value="Subscribe Youtube!";
        document.getElementById("step3").onclick= "";
        document.getElementById("stepfinal").style.backgroundColor = "#204ecf";
        document.getElementById("stepfinal").style.cursor = "pointer";
        document.getElementById("textfinal").innerHTML= "Terimakasih telah mengikuti intruksi! Klik Download File untuk melanjutkan!";
         document.getElementById("stepfinal").disabled= false;
    }
        function stepfinal()
    {    window.open($linkfile);
        
    }
</script>

Ganti tautan_1/2/3 yang di tandai sesuai dengan yang kamu inginkan dan tautan_unduh dengan URL kamu.

Demo Tombol Unduh

Halaman Demo

Penutup

Nah itu tadi Cara Membuat Tombol Unduh Berdasarkan Tugas. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, bila ada kendala kamu bisa bertanya melalui kolom komentar.

Source:
kimidev.site