|
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?
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>
.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}
Langkah #4: 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.
Langkah #5: 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.
Langkah #6: 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.
Referensi:
kimidev.site