Ahmiw.com - Pada artikel ini admin akan membahas Cara Menambahkan Tombol Timer Download yang sering digunakan di blog download aplikasi, anime dan sebagainya. Keuntungan menggunakan cara ini dapat meningkatkan CPM iklan sobat, sebab itu admin menyarankan memasang cara ini.
Kosepnya, tombol ini akan otomatis memunculkan waktu hitung mundur apabila pengunjung mengklik tombol download yang sudah disediakan. Jika timer tersebut menunjukan angka 0 otomatis link dowload tersebut akan muncul. Untuk tutorialnya silahkan sobat simak langkah-langkah berikut.
- Buka dashboard Blogger sobat.
- Pilih menu Tema > Edit HTML.
- Cari kode </body> dan tempel kode dibawah tepat DIATAS kode tersebut.
- Tempelkan juga kode dibawah tepat DIATAS </body> untuk font Awesomenya.
- Kemudian copy kode berikut tepat DIATAS </head>.
- Terakhir, Simpan dan untuk pemasangan silahkan buka menu postingan.
- Pilih Mode HTML (bukan Compose) dan copy kode dibawah.
- Terakhir, silahkan sesuaikan kode tersebut sesuai kenginginan sobat dan Simpan.
<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>
<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>
<style type='text/css'>
/* Auto Download */
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#1589E3;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:#1589E3;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>
<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> Jagoan Design</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>
Demikianlah Cara Menambahkan Tombol Timer Download di Blogger yang dapat admin bagikan. Semoga bermanfaat dan apabila ada pertanyaan silahkan komen di kolom komentar. Sampai jumpa, sekian dan terimakasih.