Cara Membuat Tombol Download Berdasarkan Tugas

Cara Membuat Tombol Unduh Berdasarkan Tugas

Kali ini kita akan berbagi tutorial cara membuat tombol download di blog yang akan terbuka berdasakan intruksi tugas. Kamu bisa melihat cara kerja tombol tersebut melalui halaman demo.

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

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

Langkah Membuat Tombol Download Berdasarkan Tugas

Buka Dasbhoard Blogger kamu
Masuk ke Tema > Edit HTML

Tambahkan kode CSS di bawah ini di atas tag </style> atau tag ]]></b:skin>

.step-container{--stepdwn-bg:#10aeb9;--stepdwn-alt:#e6e6e6;--stepdwn-color:#fffdfc}
.i{width:var(--svg-size,18px);height:var(--svg-size,18px);stroke:currentColor;stroke-width:var(--svg-stroke,2);stroke-linecap:round;stroke-linejoin:round;fill:none}
.step-container>:not(:first-child){margin-top:24px}
.step-container :where(.step-header,.step-download){display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.step-header svg{margin:0 10px}
.step-download>*{margin:0 10px;padding:8px;background-color:var(--stepdwn-alt);color:var(--stepdwn-color);border-radius:5px}
.step-download>:not(:disabled){background-color:var(--stepdwn-bg)}
.step-thanks{font-size:12px;text-align:center}

Tambahkan kode berikut tepat di atas tag </body> template kamu

<script type='text/javascript'>/*<![CDATA[*
/* Button Download Instruction */
const links = {
  link1: "link_sosial_media", // profile fb
  link2: "link_sosial_media", // profile ig
  link3: "link_sosial_media" // channel yt
};
const elements={stepone:document.querySelector(".step1"),steptwo:document.querySelector(".step2"),stepthree:document.querySelector(".step3"),stepfinals:document.querySelector(".step-download"),stepconten:document.querySelector(".step-container")},windowFeatures="left=100,top=100,width=620,height=420";function sleep(e){return new Promise(t=>setTimeout(t,e))}async function step1(){window.open(links.link1,"OpenFB",windowFeatures),await sleep(4e3),elements.stepone.value="1. Like Sukses!",elements.stepone.onclick=null,elements.steptwo.disabled=!1}async function step2(){window.open(links.link2,"OpenIG",windowFeatures),await sleep(4e3),elements.steptwo.value="2. Follow Sukses!",elements.steptwo.onclick=null,elements.stepthree.disabled=!1}async function step3(){window.open(links.link3,"OpenYT",windowFeatures),await sleep(4e3),elements.stepthree.value="3. Subscribe Sukses!",elements.stepthree.onclick=null;let e=document.createElement("a");e.classList.add("step-final"),e.textContent="Download File",e.href=urldn,elements.stepfinals.insertAdjacentElement("beforeend",e);let t=document.createElement("p");t.classList.add("step-thanks");let n=document.createTextNode("Klik Download File untuk melanjutkan!");t.appendChild(n),elements.stepconten.insertAdjacentElement("beforeend",t),Object.values(elements).slice(0,3).forEach(e=>e.remove())}
/*]]>*/</script>

Ganti link_sosial_media sesuai dengan profile kamu.

Buat Tombol Unduh

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='step-container'>
  <div class='step-header'>
    <svg class="i i-lock" viewBox="0 0 24 24"><path d="M16 10V6a4 4 0 0 0-8 0v4"></path><rect width="18" height="12" x="3" y="10" rx="2"></rect></svg>
    <span class='step-title'>unLock Button Download</span>
  </div>
  <div class='step-download'>
    <input class='step1' onclick='step1()' type='button' value='1. Like Fans Page!'/>
    <input disabled='' class='step2' onclick='step2()' type='button' value='2. Follow Instagram!'/>
    <input disabled='' class='step3' onclick='step3()' type='button' value='3. Subscribe Youtube!'/>
  </div>
</div>

Ganti nilai value sesuai dengan kalimat atau instruksi yang kamu berikan.

Selanjutnya tambahkan kode js ke dalam postingan yang sama yang dibuat pada langkah 4
```
<script type='text/javascript'>/*<![CDATA[*
/* links download */
const urldn = 'link_download'
/*]]>*/</script>
```
Ganti link_download dengan tautan file unduh milih kamu.

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.