Dan bagi anda yang kebetulan memakai template blog Viomagz, anda tidak perlu ribet kalau hanya untuk menciptakan Tombol Download saja, alasannya ialah bergotong-royong dalam template keren viomagz ini, instruksi "Css" untuk menampilkan tombol download nya, sudah ada, hanya saja instruksi untuk menciptakan bentuk tombol nya yang mungkin belum anda ketahui.
Nah, untuk itu silahkan kopy ajah instruksi nya dibawah ini.
<a class="buttonDownload" href="URL Download">Download</a>
Untuk instruksi yang aku tandai, isi dengan file alamat url download yang ingin anda bagikan ke pengunjung. Nanti tampilanya akan menyerupai ini:
Download
Untuk memastikan instruksi 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", supaya pengunjung sanggup dengan gampang melihat terlebih dahulu sebelum mengambil atau unduh file atau apasajah yang anda bagikan.
Dibawah ini yang mungkin cocok dengan impian anda, silahkan ambil copy instruksi 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 instruksi css berikut ini sempurna di atas instruksi ]]</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:'f135';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:'f019';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, instruksi ini sanggup digunakan.
Nah, demikian sedikit ulasan untuk nembuat tombol dowbload dan demo di template Viomagz atau lainya semoga bermanfaat.
0 Response to "Membuat Tombol Download Dan Demo Di Blog Template Viomagz"
Post a Comment