![]() |
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.
Table of Contents
Langkah Membuat Tombol Download Berdasarkan Tugas
Langkah #1: Buka Dasbhoard Blogger kamuLangkah #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;}
- Buat halaman atau posting untuk menampilkan tombol unduh
- Beralih ke tab
Tampilan HTML
- 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 tambahkankode 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
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