Membuat Tombol Download Dan Demo Di Blog Template Viomagz

Baca Juga

Tombol Download Viomagz - sangat sempurna sekali kalau anda yang memiliki sebuah blog yang ingin membagikan file - file tertentu semoga sanggup dengan gampang di ambil oleh pengunjung.

Dan bagi anda yang kebetulan memakai template blog Viomagz, anda tidak perlu ribet kalau hanya untuk menciptakan Tombol Download saja, alasannya ialah bahwasanya dalam template keren viomagz ini, isyarat "Css" untuk menampilkan tombol download nya, sudah ada, hanya saja isyarat untuk menciptakan bentuk tombol nya yang mungkin belum anda ketahui.

Nah, untuk itu silahkan kopy ajah isyarat nya dibawah ini.

<a class="buttonDownload" href="URL Download">Download</a>

Untuk isyarat yang aku tandai, isi dengan file alamat url download yang ingin anda bagikan ke pengunjung. Nanti tampilanya akan menyerupai ini:

Download

Untuk memastikan isyarat css nya memang benar sudah ada atau tidak, anda sanggup temukan di bab tag ]]</b:skin> kodenya kurang lebih menyerupai ini:

/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: $(link.color);
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;
}
}
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}

Kode di atas hanya sekedar untuk menciptakan tombol download sajah, namun tidak dengan Tombol demo langsungnya.

Dan bagi anda yang menginginkan menciptakan "tombol download di sertai tombol demo langsungnya", semoga pengunjung sanggup dengan gampang melihat terlebih dahulu sebelum mengambil atau unduh file atau apasajah yang anda bagikan.

Dibawah ini yang mungkin cocok dengan harapan anda, silahkan ambil copy isyarat nya.

Tombol Download dan Demo

kode ini untuk di pasang di postingan.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="URL Demo/" target="_blank">DEMO</a></li>
<li><a class="download" href="URL Download/view" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Ganti yang dikasih tanda dengan Url tujuan yang dinginkan. Dan pasang juga isyarat css berikut ini sempurna di atas isyarat ]]</b:skin>

/* Tombol Download dan Demo */
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#e3a459;}
.download {background-color:#005dce;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Selesai klik simpan.

Tampilanya nanti akan terlihat menyerupai ini, dan untuk warna, silahkan sesuaikan sendiri yang di inginkan.

Sebenarnya, Kode di atas ini tidak khusus untuk template viomagz saja, namun untuk template blogger lain juga, isyarat ini sanggup digunakan.

Nah, demikian sedikit ulasan untuk nembuat tombol dowbload dan demo di template Viomagz atau lainya semoga bermanfaat.