-->
Cara Membuat Button Download Countdown Blog
Rabu, 26 Desember 2018




Bahastutorial.com - Kesempatan kali ini kita akan membahas cara membuat button download dengan waktu atau menggunakan countdown .. Button download ini sangat bagus untuk di pakai oleh situs yang menyediakan situs download .. karna di button download ini bisa sekaligus menampilkan button download lebih dari 1 . bagaimana menarik bukan?

Cara Pemasangan :

1) Masuk Ke Blogger
2) Pilih Template/Tema
3) Kemudian Masuk Ke Edit Html
4) Silahkan Simpan Kode Javascript Di Atas Kode </body>
5) Silahkan Simpan Kode Css Di Atas Kode </head>
6) Silahkan Simpan Kode Html Di Postingan  / Page ( Pilih HTML Bukan Compose )



 
   
  <b:if cond='data:view.isPost'>
<style type='text/css'>
/*<![CDATA[*/
/*  Css By Bahastutorial.com*/
#bahastutorial-download{opacity:0;min-height:550px;padding:30px 0 0;position:fixed;z-index:999999999;width:100%;height:100%;left:0;right:0;top:200%;bottom:0;background:-webkit-linear-gradient(left,#2348a5 0%,#195eca 100%);transition:all .2s ease}
.btneffect{border:0;padding:20px 16px;font-size:14px;cursor:pointer;font-family:inherit;color:#fff;background:-webkit-linear-gradient(left,#2348a5 0%,#195eca 100%);border-radius:6px}
.btneffect:before{content:"\f0ed";display:block;font-family:FontAwesome;height:28px;width:32px;line-height:25px;font-size:16px;text-align:center;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;float:left;margin-left:2px;margin-right:10px;color:#ffffff}
.btneffect.reload:before{content:"\f021"!important}
.btnclose{opacity:0;padding:16px 2px;position:fixed;font-family:inherit;z-index:999999999;width:73px;height:43px;line-height:0;left:0;right:0;bottom:500%;transition:all .2s ease;margin:0 auto;background:#fff;border:0;border-bottom:0;border-radius:21px 21px 0 0;cursor:pointer}
.btnclose i{color:#1e52b7}
#bahastutorial-download.open{transition:all .2s ease;opacity:1;top:0}
.btnclose.open{transition:all .2s ease;opacity:1;bottom:0}
#bahastutorial-download .bahastutorial-downloadbg{background-position:center center;background-size:cover;height:100%;opacity:0.05;position:absolute;right:0;top:0;width:100%;z-index:-1}
#bahastutorial-download .count_direct_link .directdownloadlink,#bahastutorial-download .count_direct_link.paused .countdownnumber{display:none}
#bahastutorial-download .count_direct_link .countdownnumber,#bahastutorial-download .count_direct_link.paused .directdownloadlink{display:block}
#bahastutorial-download .count_direct_link .directdownloadlink{margin:0 auto 10px;text-align:center}
#bahastutorial-download .count_direct_link .countdownnumber .circle{border-radius:999px;box-shadow:0 0 0 10px rgba(255,255,255,0.5) inset;height:150px;left:0;margin:0 auto 10px;position:relative;right:0;width:150px}
.count{animation-fill-mode:forwards;color:#ffffff;font-size:40px;line-height:150px;position:absolute;text-align:center;width:100%;z-index:2;-webkit-animation:fadeout .5s (20 + 1)+s 1 linear;-webkit-animation-fill-mode:forwards}
@-webkit-keyframes l-rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-180deg)}}
@-webkit-keyframes r-rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-180deg)}}
@-webkit-keyframes fadeout{0%{opacity:1}100%{opacity:0.5}}
#bahastutorial-download .count_direct_link .directdownloadlink em{border-radius:100%;border:10px solid #8bc918;color:#8bc918;display:block;height:150px;margin:0 auto;width:150px}
#bahastutorial-download .count_direct_link .directdownloadlink em:hover{background-color:#8bc918;color:#ffffff}
#bahastutorial-download .count_direct_link .directdownloadlink em i.animated{font-size:57px;line-height:110px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1s;-moz-transition-property:-moz-transform;-moz-transition-duration:1s;-webkit-animation:1s ease 0s normal none infinite magic-mouse-icon;-moz-animation:1s ease 0s normal none infinite magic-mouse-icon;-o-animation:1s ease 0s normal none infinite magic-mouse-icon;animation:1s ease 0s normal none infinite magic-mouse-icon}
@-moz-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}}
@-webkit-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}}
@-o-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}}
@keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}}
#bahastutorial-download .count_direct_link .directdownloadlink em:hover i.animated{line-height:140px;-webkit-animation-name:pulse;-moz-animation-name:pulse;-webkit-animation-duration:1s;-moz-animation-duration:1s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear}
@-webkit-keyframes pulse{0{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-moz-keyframes pulse{0{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(1.2);transform:scale(1.2)}100%{-moz-transform:scale(1);transform:scale(1)}}
#bahastutorial-download h1{color:#ffffff;font-size:25px;font-weight:bold;margin:0 auto 10px;text-align:center;text-shadow:0 1px 0 #000000}
#bahastutorial-download h2{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000}
#bahastutorial-download h3{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000}
#bahastutorial-download .anotherserver{background-color:#ffffff;border-radius:5px;margin:20px auto;padding:15px;width:80%;overflow:hidden;display:none}
#bahastutorial-download .anotherserver ul li{float:right;margin:10px auto;padding:0 5px;width:38%}
#bahastutorial-download .anotherserver ul li a{background-color:#8bc918;color:#ffffff;display:block;font-size:22px;width:200px;height:45px;line-height:45px;text-align:center}
#bahastutorial-download .anotherserver ul li a i{background-color:#7cba09;float:right;height:45px;line-height:45px;width:25%}
#bahastutorial-download .anotherserver ul li a span{float:left;width:75%}
#bahastutorial-download .anotherserver ul li a:hover{background-color:#7cba09}
@media screen and (max-width : 768px) {#bahastutorial-download .anotherserver ul li {float: none;width: 100%}}
/* End bahastutorial-download */
/*]]>*/
</style>
</b:if>
 
  
  /* Javascript By Bahastutorial.com*/
<b:if cond='data:view.isPost'>
<script type='text/javascript'>/*<![CDATA[*/
// info script
var noimg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhr4AQ7lRPO6jhQyzuD8aJGFgUyc0JAQlhee7O9DPzdugqO6cHd5gWd9lK6EFGrCDWgDw4PLfAwcKffxcgzi8__N7aPLbz29YGdSOleIi_FdNy-GVOj9dPh1z6cRphl8WrZExl7gc8B8/s1600/90.jpg',
text='Download Ulang';
// 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");
// js Ready
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="//rawcdn.githack.com/bahastutorial/part2/master/download-severs.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
/*]]>*/</script>
</b:if>
 
  
  <button class="btneffect" type="button">Download</button>
<br />
<div id="bahastutorial-download">
<div class="bahastutorial-downloadbg">
</div>
<div class="container">
<div class="count_direct_link">
<div class="countdownnumber">
<div class="circle">
<div class="count">
10</div>
<div class="l-half">
</div>
<div class="r-half">
</div>
</div>
</div>
<div class="directdownloadlink">
</div>
</div>
<h1>
Link Download Akan Muncul Dalam Hitungan 10 Detik</h1>
<div class="anotherserver">
<ul>
<!-- BAHASTUTORIAL.COM -->
<li> 
<a href="https://www.bahastutorial.com/" title="Google Drive">
   <i aria-hidden="true" class="fa fa-cloud-download"></i>
    Google Drive
</a>
</li>
<!-- BAHASTUTORIAL.COM -->
<li> 
<a href="https://www.bahastutorial.com/" title="4shared">
   <i aria-hidden="true" class="fa fa-cloud-download"></i>
    4Shared
</a>
</li>
<!-- BAHASTUTORIAL.COM -->
<li> 
<a href="https://www.bahastutorial.com/" title="Zippyshare">
   <i aria-hidden="true" class="fa fa-cloud-download"></i>Zippyshare
</a>
</li>
<!-- BAHASTUTORIAL.COM -->
<li> 
<a href="https://www.bahastutorial.com/" title="Uploaded">
    <i aria-hidden="true" class="fa fa-cloud-download"></i>
Uploaded
</a>
</li>
<!-- BAHASTUTORIAL.COM -->
</ul>
<div class="clearfix">
</div>
</div>
</div>
</div>
<button class="btnclose" type="button"><i class="fa fa-window-close"></i>
</button>





Silahkan Edit Beberapa Bagian Yaitu :

1) https://www.bahastutorial.com/ = Masukan Dengan Link Download Kalian
2) Google Drive = Nama Cloud Storage Link Download Yang Kalian Gunakan
3) Uploaded= Nama Cloud Storage Link Download Yang Kalian Gunakan
4) Zippyshare =Nama Cloud Storage Link Download Yang Kalian Gunakan
5) 4shared =Nama Cloud Storage Link Download Yang Kalian Gunakan
6) Link Download Akan Muncul Dalam Hitungan 10 Detik= Teks Tampilan Yang Bisa Di Edit Sesuai Ke Inginan

Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com


★ ★ ★ ★ ★

Aturan Komentar : Tanyakan Di Kolom Komentar Apabila Ada Yang Kurang Jelas. Komentar Dengan Sopan . Apabila Ada Yang Kurang Sopan. Admin Akan Otomatis Hapus Komentar Anda.
Comment Sekarang
Langganan: Posting Komentar (Atom)