Skip to main content

Memasang Tombol Download Box dengan Counter

Hallo sobat blogger, jumpa lagi dengan saya, sudah sekian lamanya saya jarang membuat postingan di blog ini.
Nah sobat pada kesempatan kali ini saya menyempatkan diri membuat post lagi. dan saya akan sedikit berbagi kepada kalian Memasang Tombol Download Box dengan Counter, dan untuk Cara Memasang Tombol Download Box dengan Counter kalian bisa mengikuti langkah-langkah dibawah ini.
Dengan mudah, apa lagi bagi kalian yang mempunyai blog download cocok banget style ini kalian gunakan nantinya di postingan kalian, ok kita langsung saja ke pokok ini dari judul diatas.
Memasang Tombol Download Box dengan Counter 
Kalian bisa menggunakan code dibawah ini.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Dan cara menerapkan code diatas kalian buka halaman blogger > PILIH TEMA > EDIT HTML > lalu tempelkan codenya tepat sebelum </head>, dan untuk selanjutnya kalian pasang juga code dibawah ini.

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
Silahkan pasang code CSS diatas tepat sebelum </head>. Dan kalian jangan lupa juga terapkan code dibawah ini.

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>
Silahkan kalian pasang code diatas tepat sebelum </body>, nah kalian simpan kembali template yang sudah kalian edit tadi.

Langkah terakhir kalian bisa menggunakan code dibawah ini, untuk memanggil/memunculkan Tombol Download Box dengan Counter 

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="linkdownloadx" 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> AGUS GUNAWAN ORIGINAL</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 300MB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.
</div>
</div>
DEMO
Nah sobat kalian bisa sesuaikan kodenya sesuai kebutuhan postingan kalian. Dan mungkin dari saya cukupkan sekian dulu ya tentang Memasang Tombol Download Box dengan Counter selamat mencoba. dan semoga bisa bermanfaat.
Labels:

Comments

Post a Comment

Popular posts from this blog

Kumpulan Dompet / Wallet Bitcoin Terbaik Gratis dan Terpercaya

Bitcoin merupakan uang digital yang lahir pada tahun 2009, pencipta bitcoin bernama satoshi nakmura dengan total penyebaran atau supply nya terbatas hanya sekitar 21 juta btc saja. Dari tahun ke tahun penggunaan bitcoin semakin banyak dan semakin luas, sehingga membuat harga bitcoin melonjak tajam pada tahun pertamanya yang mencapat sekitar $800 USD lebih kala itu pada tahun 2010. BitcoinQ Pada tahun 2016 ini bertepatan pada bulan maret harganya sekitar $449 USD atau sekitar Rp.6.000.000. Harga bitcoin yang fluktuatif ini membuat  para investos mulai menanamkan dana nya untuk sekedar membeli bitcoin atau trading. Namun saat akan membeli bitcoin atau menambang bitcoin ini kita membutuhkan suatu wadah untuk menyimpannya yang disebut wallet bitcoin. Wallet bitcoin bisa dibuat dengan menginstal aplikasi wallet di komputer atau bisa juga dengan menggunakan jasa wallet secara online agar bisa di tukar dengan uang rupiah maupun uang lainnya. Saya pribadi akan membagikan daftar pemb...
Post a Comment
Read more

Shadow Brokers, Kelompok Hacker Yang Buat Pusing NSA

Pada tahun ini agensi milik Amerika Serikat, National Security Agency (NSA) mendapat pukulan berat setelah sejumlah data dan aplikasi penting mereka berhasil dibongkar oleh kelompok hacker bernama Shadow Brokers. Melalui Shadow Brokers inilah akhirnya kita tahu bahwa NSA sepertinya mempunyai tim hacker yang memiliki sandi 'Equation Group' , sebuah tim yang bekerja dibawah NSA melalui unit kerja Tailor Acess Operations (TAO). TAO ini bertugas mengumpulkan berbagai program untuk membongkar dan meretas beberapa sistem keamanan dari perusahaan software ternama. Sejak akhir 2016 lalu, Shadow Brokers telah berhasil membongkar dan mengungkap salah satu kelemahan dari sistem router Cisco, sebuah server email untuk Windows dan Linux. Lebih parahnya, mereka memberikan celah kelemahan tersebut kepada sang pembuat ransomware 'WannaCry' melalui alat yang di terbitkan hasil yang mereka peroleh dari peretasan NSA tersebut. Tentu saja, pada awalnya NSA hanya ingin menyimpa...
Post a Comment
Read more

Pemuda Asal Pasuruan Dapatkan $7500 Setelah Temukan Bug Google

Biasa disapa Nosa. Remaja 19 tahun asal Bukir, Kota Pasuruan itu, diganjar $7.500.00 oleh Google, setelah temukan bug. Sang hacker pun bercita-cita ingin menjadi "pengangguran sukses". BELAJAR di jurusan IPS pada saat SMA, tak menghalanginya mempelajari IT (Information Technology), yang notabene digeluti oleh mereka berlatar ilmu eksak, IPA. M. Nosa Sandi Prasetyo, namanya. "Saya biasa dipanggil Nosa," katanya, memulai perbincangan dengan wartabromo.com, Rabu (26/9/2018). Remaja asal Bukir, Kota Pasuruan ini, kelahiran 30 September, 19 tahun lalu. Nosa yang sedang menikmati masa-masa semester ketiga di bangku kuliah saat ini, ketiban rejeki. Ia mendapat hadiah tak terduga dari Google, raksasa search engine (mesin pencarian) di dunia. Tak tanggung-tanggung, ia mendapat $7.500.00 dari Google. Ketertarikannya di dunia IT diakuinya sudah sejak belia. Ketika duduk di bangku Sekolah Dasar (SD) sudah menyukai game, layaknya anak-anak zaman now sih. Ketika di SMP, mulailah ...
Post a Comment
Read more