Cara membuat Tombol Download Otomatis pada Blogspot

Banyak kita menjumpai website atau blog download yang memiliki atau mempunyai tampilan Tombol Download yang menarik. Nah, kali ini saya akan mencoba memberikan tutorial cara membuat tombol download pada blog. Jika biasanya link download suatu website atau blog hanya sebatas tulisan saja, maka dengan memodifikasi sedikit CSS pada HTML template blog, kita bisa menjadikan Link Download kelihatan menarik.

Tombol Download ini saya dapatkan dari berbagai model Template yang beredar di internet. Berikut beberapa contoh Tombol Download dan cara memasang nya pada postingan Blog kita.

#1. Tombol Download Sederhana.

Tombol ini dapat kita buat tanpa mengedit HTML template blog.Cukup dengan menambahkan code <button> dan </button>


<a href="https://www.nofantz.com/" rel="nofollow" target="_blank"><button>Contoh Tombol Download</button></a>

#2. Tombol Download Otomatis ala VioMagz

Tombol download dengan tampilan lebih menarik dan keren.

Contoh Tombol Download
Sisipkan code di bawah ini tepat di atas code ]]></:skin> atau ]]></b:template-skin>


/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #2db300;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload:hover {
opacity: .85;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}

Untuk membuat tombol Download di postingan blog, kamu cukup menambahkan code class="buttonDownload" seperti code di bawah.


<a class="buttonDownload" href="https://www.nofantz.com/" rel="nofollow" target="_blank">Contoh Tombol Download</a>

#3. Tombol Download dan Tombol Demo

Contoh Tombol Demo Contoh Tombol Download

Sisipkan code berikut tepat di atas code ]]></:skin> atau ]]></b:template-skin>


/* Tombol Download */
#wrap {
margin: 20px auto;
text-align: center;
}.btn-download {
display: inline-block;
position: relative;
font-weight: 700;
background: #5c00e6;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn-download:hover, .btn:active {
background:  #944dff;
}
a.btn-download {
color: rgba(255,255,255,1);
}

/* Tombol Demo */
#wrap {
margin: 20px auto;
text-align: center;
}.btn-demo {
display: inline-block;
position: relative;
font-weight: 700;
background: #a300cc;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn-demo:hover, .btn:active {
background:  #d633ff;
}
a.btn-demo {
color: rgba(255,255,255,1);
}

Untuk mengaplikasikan ke postingan blog, lihat contoh code berikut


<a class="btn-demo" href="https://www.nofantz.com/" rel="nofollow" target="_blank">
Contoh Tombol Demo <i class="fa fa-laptop" aria-hidden="true"></i></a> 
<a class="btn-download" href="https://www.nofantz.com/" rel="nofollow" target="_blank">Contoh Tombol Download <i class="fa fa-download" aria-hidden="true"></i>
</a>