Modus-modus Penipuan: Cara Mengenali dan Menghindari Penipuan

Kawaii Tech - Pasti kamu yang sering melihat di beberapa situs download / uploud file yang menggunakan tombol download dengan countdown timer. Sebut saja seperti situs download aplikasi jalan tikus atau apkpure yang juga menggunakan tombol download dengan countdown timer. Memang seperti apa sih tombol download ini? Mengapa sampai situs situa besar memakai tombol download yang seperti ini?

Tombol auto download ini mempunyai fitur yang sangat unik dibandingkan tombol download biasa, yakni bila kamu mengklik tombolnya maka akan muncul countdown timer dengan waktu tertentu. Dan saat waktu pada countdown timer tersebut habis maka file akan langsung terdownload atau menuju ke link yang dituju otomatis. Meskipun cukup sederhana namun faktanya tomgol download yang seperti ini bisa berdampak ppsitif pada blogmu loh, seperti bisa menaikkan bounce rate dan menaikkan cpm.

Tombol download otomatis dengan countdown timer ini bisa kamu terapkan untuk kamu yang menggunakan blogger / blogspot. Dan mungkin bila dipasang pada blogmu akan terlihat lebih sempurna dan keren karena tombol download ini dilengkapi dengan fitur yang cukup lengkap seperti responsive design, font awesome, download ulang jika tidak terdownload otomatis serta juga dilengkapi dengan nama file, ukuran file, dan uplouder sehingga pengunjung bisa mengetahui dengan jelas file yang akan di download tersebut. Nah kalau kamu penasar seperti apa tombol download nya maka kamu bisa melihat demo dari tombol download ini. Kamu bisa melihat demonya pada link dibawah ini.

Demo

Bagaimana keren bukan? Jika kamu ingin memasang tombol download seperti itu di blogmu cukup ikuti langkah langkah sederhana ini.

Baca Juga :
Auto Balas Pesanmu! Begini Caranya Membuat Bot Whatsapp

Cara Membuat Tombol Auto Download Dengan Countdown Timer

Pertama masuk ke blogger kemudian pilih menu tema dan edit HTML. Kemudian pada edit html tersebut masukkan kode dibawah ini sebelum

.

<script type='text/javascript'>
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
   
        } else {
            teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>

Kamu bisa mengganti angka 10 (dalam satuan detik) untuk countdown timer yang kamu inginkan.

Kemudian copy juga kode CSS ini kedalam templatemu sebelum

<style type='text/css'>
/*Auto Download By Reboza Sambirejo*/
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700}
#btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif}
.bungkus-down{background:#FE634A;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;}
.file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left}
.catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555}
#download{float:right}
a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
.embuh span{display:inline-block;line-height: 38px;float:right}
.iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right}
.file-deskripsi{display:block}
.file-deskripsi span{margin-right:3px}
.iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto}
h2.entry-title{margin-top:10px}
.post-labels, .post-timestamp{display:none}
a.home-link{color:#555;font-size:20px;}
a.home-link:hover{color:#222}
@media screen and (max-width:600px){
.paling-jobo{float:none;width:100%}
.iklan-down{float:none;width:100%;text-align:center;padding:0}
 }
@media screen and (max-width:320px){
/* CSS styles */
.file-info{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.embuh span{float:none;width:100%;text-align:center}
.file-deskripsi{text-align:center}
}
</style>

Jika warna dan style dari tombol download ini dirasa kurang cocok untuk blogmu, kamu bisa mengubah warna dan stylenya sesuai seleramu.

Nah, setelah memasukkan kode CSS diatas, kamu bisa menggunakanya langsung di blog. Untuk cara menggunakanya seperti biasa. Pada saat akan membuat post / halaman / entri baru masukkan kode ini pada mode HTML bukan compose. Ingat pada mode HTML!

<div class="paling-jobo">
<div class="bungkus-down">
<div class="embuh">
<div class="file-info">
Nama File Mu
</div>
<button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
<a id="download" href="linkdownload" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Reboza Sambirejo</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 5MB</span>
</div>
</div>
<div class="catatan-sikil">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>

Ops! Lupa masih ada yang kurang satu hal lagi. Karena tombol download ini menggunakan font awesome jadi bila blogmu belum terpasang Font Awesome dan PT Sans Narrow silahkan tambahkan kode ini sebelum namun bila sudah ada yah biarkan saja.

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
//]]>
</script>

Baca Juga :
Cara Mencetak Dari Halaman Terakhir Di Semua Printer

Seperti itulah cara membuat tombol download otomatis dengan countdown timer. Jika ada hal yang masih bingung bisa kamu tanyakan di komentar.
Sumber : Rebozasambirejo

Go to Link